38 lines
3.6 KiB
XML
38 lines
3.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="720" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
|
|
<title id="title">Поток токенов малого контракта кнопки</title>
|
|
<desc id="desc">Именованные токены переходят в контракт primary button, затем в известные точки использования. Visual payload справа объявляет параметры будущей проверки, но не является снимком или результатом теста.</desc>
|
|
<rect width="1200" height="720" fill="#F7F9FC"/>
|
|
<text x="70" y="78" fill="#102A43" font-family="Arial, sans-serif" font-size="34" font-weight="700">Один token → один понятный путь изменения</text>
|
|
<text x="70" y="116" fill="#486581" font-family="Arial, sans-serif" font-size="20">Малый контракт кнопки, май 2022</text>
|
|
<g font-family="Arial, sans-serif">
|
|
<rect x="70" y="180" width="265" height="370" rx="18" fill="#E6F0FF" stroke="#2457D6" stroke-width="3"/>
|
|
<text x="103" y="225" fill="#102A43" font-size="25" font-weight="700">Named tokens</text>
|
|
<text x="103" y="270" fill="#2457D6" font-size="19">button.primary</text>
|
|
<text x="103" y="304" fill="#243B53" font-size="18">background</text>
|
|
<text x="103" y="338" fill="#243B53" font-size="18">foreground</text>
|
|
<text x="103" y="372" fill="#243B53" font-size="18">focus-ring</text>
|
|
<text x="103" y="406" fill="#243B53" font-size="18">radius · gap</text>
|
|
<rect x="385" y="180" width="355" height="370" rx="18" fill="#FFFFFF" stroke="#2457D6" stroke-width="3"/>
|
|
<text x="420" y="225" fill="#102A43" font-size="25" font-weight="700">Primary button contract</text>
|
|
<rect x="420" y="256" width="280" height="55" rx="10" fill="#2457D6"/>
|
|
<text x="490" y="291" fill="#FFFFFF" font-size="22" font-weight="700">Сохранить</text>
|
|
<text x="420" y="354" fill="#243B53" font-size="19">states: default · hover</text>
|
|
<text x="420" y="386" fill="#243B53" font-size="19">focus-visible · disabled</text>
|
|
<text x="420" y="418" fill="#243B53" font-size="19">loading</text>
|
|
<text x="420" y="470" fill="#486581" font-size="18">name · role: button · state</text>
|
|
<rect x="790" y="180" width="340" height="165" rx="18" fill="#E8FFF6" stroke="#1F9D73" stroke-width="3"/>
|
|
<text x="824" y="225" fill="#102A43" font-size="24" font-weight="700">Usage inventory</text>
|
|
<text x="824" y="267" fill="#243B53" font-size="18">profile-save</text>
|
|
<text x="824" y="299" fill="#243B53" font-size="18">billing-pay</text>
|
|
<text x="824" y="331" fill="#243B53" font-size="18">dialog-cancel</text>
|
|
<rect x="790" y="392" width="340" height="158" rx="18" fill="#FFF6DD" stroke="#D69E2E" stroke-width="3" stroke-dasharray="10 8"/>
|
|
<text x="824" y="437" fill="#744210" font-size="24" font-weight="700">Visual payload</text>
|
|
<text x="824" y="475" fill="#744210" font-size="18">375 · 1280 · states</text>
|
|
<text x="824" y="507" fill="#744210" font-size="16">declared input, not screenshot</text>
|
|
<path d="M335 365H375" stroke="#2457D6" stroke-width="5"/><path d="M365 352l20 13-20 13" fill="#2457D6"/>
|
|
<path d="M740 278H780" stroke="#1F9D73" stroke-width="5"/><path d="M770 265l20 13-20 13" fill="#1F9D73"/>
|
|
<path d="M740 466H780" stroke="#D69E2E" stroke-width="5"/><path d="M770 453l20 13-20 13" fill="#D69E2E"/>
|
|
</g>
|
|
<text x="70" y="640" fill="#486581" font-family="Arial, sans-serif" font-size="18">Граница модели: DOM, CSS compilation, browser и visual regression не запускались.</text>
|
|
</svg>
|