huncode/progcode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise May 2022 design system articles
Build and deploy / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
huncode
2026-07-31 13:46:13 +03:00
parent fb4d8598ab
commit 98a64abeb7
7 changed files with 491 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/assets/editorial/2022/design-system-component-contract-2022.svg
+35
View File
@@ -0,0 +1,35 @@
<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 получает отдельные слои token names, required states, semantic name role state и usage inventory. Visual payload вынесен пунктиром, потому что не доказывает результат проверки.</desc>
<rect width="1200" height="720" fill="#F7F9FC"/>
<text x="65" y="78" fill="#102A43" font-family="Arial, sans-serif" font-size="34" font-weight="700">Контракт не смешивает четыре ответственности</text>
<g font-family="Arial, sans-serif">
<rect x="430" y="250" width="340" height="190" rx="24" fill="#2457D6"/>
<text x="510" y="315" fill="#FFFFFF" font-size="30" font-weight="700">Primary button</text>
<text x="493" y="358" fill="#D9E9FF" font-size="21">один control contract</text>
<rect x="70" y="165" width="275" height="170" rx="18" fill="#E6F0FF" stroke="#2457D6" stroke-width="3"/>
<text x="102" y="213" fill="#102A43" font-size="24" font-weight="700">1. Tokens</text>
<text x="102" y="254" fill="#243B53" font-size="18">named values</text>
<text x="102" y="286" fill="#243B53" font-size="18">не владеют state</text>
<rect x="855" y="165" width="275" height="170" rx="18" fill="#E8FFF6" stroke="#1F9D73" stroke-width="3"/>
<text x="887" y="213" fill="#102A43" font-size="24" font-weight="700">2. States</text>
<text x="887" y="254" fill="#243B53" font-size="18">default · hover</text>
<text x="887" y="286" fill="#243B53" font-size="18">focus · disabled · loading</text>
<rect x="70" y="465" width="275" height="170" rx="18" fill="#F4E9FF" stroke="#805AD5" stroke-width="3"/>
<text x="102" y="513" fill="#102A43" font-size="24" font-weight="700">3. Semantics</text>
<text x="102" y="554" fill="#243B53" font-size="18">name · role · state</text>
<text x="102" y="586" fill="#243B53" font-size="18">declared, not observed</text>
<rect x="855" y="465" width="275" height="170" rx="18" fill="#FFF6DD" stroke="#D69E2E" stroke-width="3"/>
<text x="887" y="513" fill="#102A43" font-size="24" font-weight="700">4. Inventory</text>
<text x="887" y="554" fill="#243B53" font-size="18">known usage only</text>
<text x="887" y="586" fill="#243B53" font-size="18">not repository search</text>
<path d="M345 250H415" stroke="#2457D6" stroke-width="5"/><path d="M405 237l20 13-20 13" fill="#2457D6"/>
<path d="M855 250H785" stroke="#1F9D73" stroke-width="5"/><path d="M795 237l-20 13 20 13" fill="#1F9D73"/>
<path d="M345 550H415" stroke="#805AD5" stroke-width="5"/><path d="M405 537l20 13-20 13" fill="#805AD5"/>
<path d="M855 550H785" stroke="#D69E2E" stroke-width="5"/><path d="M795 537l-20 13 20 13" fill="#D69E2E"/>
<rect x="438" y="510" width="324" height="94" rx="14" fill="#FFFFFF" stroke="#486581" stroke-width="2" stroke-dasharray="8 7"/>
<text x="472" y="550" fill="#243B53" font-size="20" font-weight="700">Visual payload</text>
<text x="472" y="581" fill="#486581" font-size="16">input for later test; no result</text>
</g>
<text x="65" y="682" fill="#486581" font-family="Arial, sans-serif" font-size="18">Реальный DOM, browser tree и screenshot должны проверяться отдельным инструментом и отдельным артефактом.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

web/public/assets/editorial/2022/design-system-diagnosis-rollback-2022.svg
+32
View File
@@ -0,0 +1,32 @@
<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">Инвентарь и контракт ведут к проверке входа. Недекларированный token и неверное значение останавливаются без изменения. Допустимая правка сохраняет предыдущее значение и может быть возвращена. Visual payload остаётся входом, а не результатом теста.</desc>
<rect width="1200" height="720" fill="#F7F9FC"/>
<text x="65" y="76" fill="#102A43" font-family="Arial, sans-serif" font-size="34" font-weight="700">Сначала остановить неверный вход, затем менять один token</text>
<g font-family="Arial, sans-serif">
<rect x="65" y="175" width="210" height="110" rx="16" fill="#E6F0FF" stroke="#2457D6" stroke-width="3"/>
<text x="103" y="221" fill="#102A43" font-size="23" font-weight="700">Inventory</text>
<text x="92" y="254" fill="#486581" font-size="17">usage · state · owner</text>
<rect x="350" y="175" width="230" height="110" rx="16" fill="#FFFFFF" stroke="#486581" stroke-width="3"/>
<text x="387" y="221" fill="#102A43" font-size="23" font-weight="700">Validate input</text>
<text x="385" y="254" fill="#486581" font-size="17">known token + value</text>
<rect x="665" y="120" width="390" height="115" rx="16" fill="#FFF0F0" stroke="#C53030" stroke-width="3"/>
<text x="702" y="166" fill="#9B2C2C" font-size="24" font-weight="700">Invalid configuration</text>
<text x="702" y="199" fill="#9B2C2C" font-size="17">stop · changed: false · rollback not needed</text>
<rect x="665" y="330" width="390" height="115" rx="16" fill="#E8FFF6" stroke="#1F9D73" stroke-width="3"/>
<text x="702" y="376" fill="#166534" font-size="24" font-weight="700">Token correction</text>
<text x="702" y="409" fill="#166534" font-size="17">save previous value for rollback</text>
<rect x="665" y="540" width="390" height="95" rx="16" fill="#F4E9FF" stroke="#805AD5" stroke-width="3"/>
<text x="702" y="580" fill="#553C9A" font-size="24" font-weight="700">Rollback applied</text>
<text x="702" y="611" fill="#553C9A" font-size="17">restore exact previous token value</text>
<path d="M275 230H340" stroke="#2457D6" stroke-width="5"/><path d="M330 217l20 13-20 13" fill="#2457D6"/>
<path d="M580 230H650V177H655" fill="none" stroke="#C53030" stroke-width="5"/><path d="M645 164l20 13-20 13" fill="#C53030"/>
<path d="M580 230H650V387H655" fill="none" stroke="#1F9D73" stroke-width="5"/><path d="M645 374l20 13-20 13" fill="#1F9D73"/>
<path d="M860 445V530" stroke="#805AD5" stroke-width="5"/><path d="M847 520l13 20 13-20" fill="#805AD5"/>
<rect x="65" y="420" width="455" height="155" rx="16" fill="#FFF6DD" stroke="#D69E2E" stroke-width="3" stroke-dasharray="10 8"/>
<text x="98" y="466" fill="#744210" font-size="24" font-weight="700">Visual payload</text>
<text x="98" y="500" fill="#744210" font-size="18">viewports · states · token names</text>
<text x="98" y="534" fill="#744210" font-size="17">declared input, not screenshot or regression PASS</text>
</g>
<text x="65" y="680" fill="#486581" font-family="Arial, sans-serif" font-size="18">Граница модели: нет DOM, CSS compilation, HTTP, browser, screenshot или настоящего visual-regression запуска.</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

web/public/assets/editorial/2022/design-system-token-flow-2022.svg
+37
View File
@@ -0,0 +1,37 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB