Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-08-29 10:58:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): updated design language / specification descriptions to better distinguish what is what

Browse Source
This commit is contained in:
Karsa
2026-08-26 18:29:47 +02:00
parent f9146584f1
commit 29ef6ddad9
15 changed files with 128 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/contribute/icons/design-principles.md
View File

@@ -166,10 +166,10 @@ You can test this by placing a **2-pixel-wide circle** inside your shape.
:::: example
::: do ../../images/2px-inner-gap.svg?raw=true
If a **2-pixel-wide circle** fits without overlapping, the gap is **wide enough**.
If a 2-pixel-wide circle fits **without overlapping**, the gap is **wide enough**.
:::
::: dont ../../images/1px-inner-gap.svg?raw=true
If the circle overlaps the shape, the gap should be **wider**.
If the circle **overlaps** the shape, the gap should be **wider**.
:::
::::
@@ -195,7 +195,7 @@ Match the visual weight of `circle` and `square`.
:::
::: dont ../../images/visual-weight-uneven.svg?raw=true
The second icon is **too large**. The fourth is **too small**.
The first icon is **too large**. The last one is **too small**.
:::
::::

64
docs/images/1px-inner-gap.svg
View File

@@ -1,61 +1,5 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1940_23742)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<path d="M120 170V210M80 210H160M150 99.9999L99.9998 130V69.9999L150 99.9999ZM40 30H200C211.046 30 220 38.9543 220 50V150C220 161.046 211.046 170 200 170H40C28.9543 170 20 161.046 20 150V50C20 38.9543 28.9543 30 40 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="117" cy="100" r="10" fill="url(#paint0_radial_1940_23742)"/>
<defs>
<radialGradient id="paint0_radial_1940_23742" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(117 100) rotate(32.9052) scale(10.1242 9.75252)">
<stop stop-color="#DD0031" stop-opacity="0.2"/>
<stop offset="1" stop-color="#DD0031" stop-opacity="0.7"/>
</radialGradient>
<clipPath id="clip0_1940_23742">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10H120M0 20H120M0 30H120M5 0V120M0 40H120M15 0V120M0 50H120M25 0V120M0 60H120M35 0V120M0 70H120M45 0V120M0 80H120M55 0V120M0 90H120M65 0V120M0 100H120M75 0V120M0 110H120M85 0V120M95 0V120M105 0V120M115 0V120" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M35 89.9999L84.9998 59.9999L35 29.9999V89.9999Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="52" cy="60" r="10" fill="#DD0031" fill-opacity="0.2" stroke="#DD0031" stroke-dasharray="1 1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 613 B

64
docs/images/2px-inner-gap.svg
View File

@@ -1,61 +1,5 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1940_23734)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<path d="M120 170V210M80 210H160M150.33 94.4C151.312 94.9683 152.127 95.7849 152.694 96.7678C153.261 97.7507 153.559 98.8654 153.559 100C153.559 101.135 153.261 102.249 152.694 103.232C152.127 104.215 151.312 105.032 150.33 105.6L109.68 129.12C108.698 129.688 107.584 129.987 106.45 129.987C105.316 129.987 104.202 129.688 103.22 129.12C102.238 128.552 101.424 127.735 100.858 126.752C100.293 125.769 99.997 124.654 100 123.52V76.48C99.998 75.3473 100.294 74.2341 100.859 73.2523C101.424 72.2705 102.237 71.4548 103.218 70.8871C104.198 70.3195 105.31 70.02 106.443 70.0187C107.576 70.0175 108.689 70.3145 109.67 70.88L150.33 94.4ZM40 30H200C211.046 30 220 38.9543 220 50V150C220 161.046 211.046 170 200 170H40C28.9543 170 20 161.046 20 150V50C20 38.9543 28.9543 30 40 30Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="120" cy="100" r="10" fill="url(#paint0_radial_1940_23734)"/>
<defs>
<radialGradient id="paint0_radial_1940_23734" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 100) rotate(32.9052) scale(10.1242 9.75252)">
<stop stop-color="#41B883" stop-opacity="0.2"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.7"/>
</radialGradient>
<clipPath id="clip0_1940_23734">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10H120M0 20H120M0 30H120M5 0V120M0 40H120M15 0V120M0 50H120M25 0V120M0 60H120M35 0V120M0 70H120M45 0V120M0 80H120M55 0V120M0 90H120M65 0V120M0 100H120M75 0V120M0 110H120M85 0V120M95 0V120M105 0V120M115 0V120" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M85.33 54.4001C86.3121 54.9683 87.1274 55.7849 87.6943 56.7678C88.2611 57.7507 88.5595 58.8654 88.5595 60.0001C88.5595 61.1347 88.2611 62.2494 87.6943 63.2323C87.1274 64.2152 86.3121 65.0318 85.33 65.6001L44.68 89.1201C43.6983 89.688 42.5842 89.9871 41.4501 89.9871C40.3159 89.9871 39.2018 89.6881 38.2201 89.1202C37.2384 88.5522 36.4238 87.7355 35.8585 86.7523C35.2931 85.7691 34.997 84.6542 35 83.5201V36.4801C34.998 35.3474 35.2944 34.2342 35.8592 33.2524C36.424 32.2706 37.2375 31.4548 38.2176 30.8872C39.1978 30.3196 40.3102 30.0201 41.4429 30.0188C42.5756 30.0175 43.6886 30.3146 44.67 30.8801L85.33 54.4001Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="55" cy="60" r="10" fill="#41B883" fill-opacity="0.2" stroke="#41B883" stroke-dasharray="1 1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

15
docs/images/established-shapes-base-do.svg
View File

@@ -1,17 +1,14 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.9">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.7" d="M46 34H38C37.4696 34 36.9609 34.2107 36.5858 34.5858C36.2107 34.9609 36 35.4696 36 36V52C36 52.5304 36.2107 53.0391 36.5858 53.4142C36.9609 53.7893 37.4696 54 38 54H50C50.5304 54 51.0391 53.7893 51.4142 53.4142C51.7893 53.0391 52 52.5304 52 52V40M46 34C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40L52 40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 49H136.504C135.952 49 135.504 49.4477 135.504 50V53C135.504 53.5523 135.952 54 136.504 54H142.504C143.056 54 143.504 53.5523 143.504 53V50C143.504 49.4477 143.056 49 142.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

15
docs/images/established-shapes-base-dont.svg
View File

@@ -1,17 +1,14 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.9">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.7" d="M46 34H38C37.4696 34 36.9609 34.2107 36.5858 34.5858C36.2107 34.9609 36 35.4696 36 36V52C36 52.5304 36.2107 53.0391 36.5858 53.4142C36.9609 53.7893 37.4696 54 38 54H50C50.5304 54 51.0391 53.7893 51.4142 53.4142C51.7893 53.0391 52 52.5304 52 52V40M46 34C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40L52 40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M150.504 41V36C150.504 35.4696 150.293 34.9609 149.918 34.5858C149.543 34.2107 149.034 34 148.504 34H140.504L134.504 40V52C134.504 52.5304 134.715 53.0391 135.09 53.4142C135.465 53.7893 135.973 54 136.504 54H142.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 34V41H134.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148.504 49V47C148.504 46.4696 148.715 45.9609 149.09 45.5858C149.465 45.2107 149.973 45 150.504 45C151.034 45 151.543 45.2107 151.918 45.5858C152.293 45.9609 152.504 46.4696 152.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M147.504 49H153.504C154.056 49 154.504 49.4477 154.504 50V53C154.504 53.5523 154.056 54 153.504 54H147.504C146.952 54 146.504 53.5523 146.504 53V50C146.504 49.4477 146.952 49 147.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

13
docs/images/established-shapes-consistency-do.svg
View File

@@ -1,15 +1,14 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52M49 48V54" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M46 51H52M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M100.797 38L88.7969 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M100.797 38L88.7969 50M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M143.504 54H138.504C137.973 54 137.465 53.7893 137.09 53.4142C136.715 53.0391 136.504 52.5304 136.504 52V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V45" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M147.504 49L152.504 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M152.504 49L147.504 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

13
docs/images/established-shapes-consistency-dont.svg
View File

@@ -1,14 +1,13 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 51H52M49 48V54" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46M46 34C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52M52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M46 51H52M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M100.797 38L88.7969 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.7969 38L100.797 50" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M100.797 38L88.7969 50M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M148.504 54H150.504C151.034 54 151.543 53.7893 151.918 53.4142C152.293 53.0391 152.504 52.5304 152.504 52V45.35V40C152.505 39.6831 152.443 39.3692 152.322 39.0764C152.2 38.7836 152.022 38.5177 151.798 38.294L148.21 34.706C147.986 34.4815 147.72 34.3036 147.428 34.1824C147.135 34.0612 146.821 33.9992 146.504 34H138.504C137.973 34 137.465 34.2107 137.09 34.5858C136.715 34.9609 136.504 35.4696 136.504 36V42" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.504 46.0016L140.502 50M140.502 50L144.501 53.9983M140.502 50L144.501 46.0016M140.502 50L136.504 53.9983" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

15
docs/images/established-shapes-sub-do.svg
View File

@@ -1,17 +1,14 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.9">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.7" d="M46 34H38C37.4696 34 36.9609 34.2107 36.5858 34.5858C36.2107 34.9609 36 35.4696 36 36V52C36 52.5304 36.2107 53.0391 36.5858 53.4142C36.9609 53.7893 37.4696 54 38 54H50C50.5304 54 51.0391 53.7893 51.4142 53.4142C51.7893 53.0391 52 52.5304 52 52V40M46 34C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40L52 40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 49H136.504C135.952 49 135.504 49.4477 135.504 50V53C135.504 53.5523 135.952 54 136.504 54H142.504C143.056 54 143.504 53.5523 143.504 53V50C143.504 49.4477 143.056 49 142.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

15
docs/images/established-shapes-sub-dont.svg
View File

@@ -1,15 +1,12 @@
<svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.9">
<rect x="31.5" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.7" d="M46 34H38C37.4696 34 36.9609 34.2107 36.5858 34.5858C36.2107 34.9609 36 35.4696 36 36V52C36 52.5304 36.2107 53.0391 36.5858 53.4142C36.9609 53.7893 37.4696 54 38 54H50C50.5304 54 51.0391 53.7893 51.4142 53.4142C51.7893 53.0391 52 52.5304 52 52V40M46 34C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40L52 40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M56.5 34.5V31.5H53.5M31.5 34.5V31.5L34.5 31.5M34.5 56.5H31.5V53.5M56.5 53.5V56.5H53.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<rect x="82.2969" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path opacity="0.5" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="#00AAFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.3" d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53M96.7969 39C96.7969 41.2091 95.006 43 92.7969 43C90.5877 43 88.7969 41.2091 88.7969 39C88.7969 36.7909 90.5877 35 92.7969 35C95.006 35 96.7969 36.7909 96.7969 39Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.7" d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48M96.6959 48H102.898C103.394 48 103.797 48.4025 103.797 48.899V52.101C103.797 52.5975 103.394 53 102.898 53H96.6959C96.1994 53 95.7969 52.5975 95.7969 52.101V48.899C95.7969 48.4025 96.1994 48 96.6959 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M107.5 34.5V31.5H104.5M82.5 34.5V31.5L85.5 31.5M85.5 56.5H82.5V53.5M107.5 53.5V56.5H104.5" stroke="#D8D8D9"/>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<rect x="132.004" y="31.5" width="25" height="25" stroke="#D8D8D9"/>
<path d="M136.504 37.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504M146.504 34C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504M152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 46V44C142.504 42.3431 141.161 41 139.504 41C137.847 41 136.504 42.3431 136.504 44V46M142.504 46H136.504M142.504 46C143.608 46 144.504 46.8954 144.504 48V52C144.504 53.1046 143.608 54 142.504 54H136.504C135.399 54 134.504 53.1046 134.504 52V48C134.504 46.8954 135.399 46 136.504 46M139.504 50V50.01" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.9" d="M157.5 34.5V31.5H154.5M132.5 34.5V31.5L135.5 31.5M135.5 56.5H132.5V53.5M157.5 53.5V56.5H154.5" stroke="#D8D8D9"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

50
docs/images/pixel-perfection-bad.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 13 KiB

20
docs/images/pixel-perfection-ideal.svg
View File

@@ -1,10 +1,11 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 40H240V60H0V40Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M230 0L230 240L210 240L210 -8.74228e-07L230 0Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M30 0L30 240L9.99999 240L10 -8.74228e-07L30 0Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M240.009 110L0.00878906 110L0.00879081 90L240.009 90L240.009 110Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M240.009 200L0.00878906 200L0.00879081 180L240.009 180L240.009 200Z" fill="#41B883" fill-opacity="0.2"/>
<g clip-path="url(#clip0_1948_26079)">
<g clip-path="url(#clip0_1955_27259)">
<path opacity="0.25" d="M50 40H60V50H50V40ZM120 40H130V50H120V40ZM30 50H40V60H30V50ZM140 50H150V60H140V50ZM20 60H30V70H20V60ZM70 60H80V70H70V60ZM100 60H110V70H100V60ZM150 60H160V70H150V60ZM50 70H60V80H50V70ZM120 70H130V80H120V70ZM10 80H20V90H10V80ZM40 80H50V90H40V80ZM130 80H140V90H130V80ZM160 80H170V90H160V80ZM200 90H210V100H200V90ZM30 100H40V110H30V100ZM140 100H150V110H140V100ZM180 110H190V120H180V110ZM220 110H230V120H220V110ZM30 130H40V140H30V130ZM200 130H210V140H200V130ZM10 150H20V160H10V150ZM40 150H50V160H40V150ZM200 150H210V160H200V150ZM50 160H60V170H50V160ZM20 170H30V180H20V170ZM70 170H80V180H70V170ZM180 170H190V180H180V170ZM220 170H230V180H220V170ZM50 190H60V200H50V190ZM200 190H210V200H200V190Z" fill="#41B883"/>
<path opacity="0.5" d="M60 40H70V50H60V40ZM40 50H50V60H40V50ZM130 50H140V60H130V50ZM60 60H70V70H60V60ZM20 70H30V80H20V70ZM150 70H160V80H150V70ZM140 90H150V100H140V90ZM210 100H220V110H210V100ZM200 120H210V130H200V120ZM220 120H230V130H220V120ZM10 140H20V150H10V140ZM30 140H40V150H30V140ZM20 160H30V170H20V160ZM190 170H200V180H190V170ZM40 180H50V190H40V180ZM210 180H220V190H210V180ZM190 190H200V200H190V190Z" fill="#41B883"/>
<path opacity="0.75" d="M100 40H110V50H100V40ZM110 40H120V50H110V40ZM30 60H40V70H30V60ZM110 60H120V70H110V60ZM140 60H150V70H140V60ZM40 70H50V80H40V70ZM10 90H20V100H10V90ZM30 90H40V100H30V90ZM190 90H200V100H190V90ZM10 100H20V110H10V100ZM190 110H200V120H190V110ZM220 150H230V160H220V150ZM200 160H210V170H200V160ZM220 160H230V170H220V160ZM30 170H40V180H30V170ZM60 170H70V180H60V170ZM60 190H70V200H60V190ZM70 190H80V200H70V190Z" fill="#41B883"/>
<path d="M70 40H80V50H70V40ZM80 40H90V50H80V40ZM90 40H100V50H90V40ZM50 50H60V60H50V50ZM60 50H70V60H60V50ZM70 50H80V60H70V50ZM80 50H90V60H80V50ZM90 50H100V60H90V50ZM100 50H110V60H100V50ZM110 50H120V60H110V50ZM120 50H130V60H120V50ZM40 60H50V70H40V60ZM50 60H60V70H50V60ZM120 60H130V70H120V60ZM130 60H140V70H130V60ZM30 70H40V80H30V70ZM130 70H140V80H130V70ZM140 70H150V80H140V70ZM20 80H30V90H20V80ZM30 80H40V90H30V80ZM140 80H150V90H140V80ZM150 80H160V90H150V80ZM20 90H30V100H20V90ZM150 90H160V100H150V90ZM160 90H170V100H160V90ZM170 90H180V100H170V90ZM180 90H190V100H180V90ZM20 100H30V110H20V100ZM150 100H160V110H150V100ZM160 100H170V110H160V100ZM170 100H180V110H170V100ZM180 100H190V110H180V100ZM190 100H200V110H190V100ZM200 100H210V110H200V100ZM10 110H20V120H10V110ZM20 110H30V120H20V110ZM200 110H210V120H200V110ZM210 110H220V120H210V110ZM10 120H20V130H10V120ZM20 120H30V130H20V120ZM210 120H220V130H210V120ZM10 130H20V140H10V130ZM20 130H30V140H20V130ZM210 130H220V140H210V130ZM220 130H230V140H220V130ZM20 140H30V150H20V140ZM210 140H220V150H210V140ZM220 140H230V150H220V140ZM20 150H30V160H20V150ZM30 150H40V160H30V150ZM210 150H220V160H210V150ZM30 160H40V170H30V160ZM40 160H50V170H40V160ZM210 160H220V170H210V160ZM40 170H50V180H40V170ZM50 170H60V180H50V170ZM200 170H210V180H200V170ZM210 170H220V180H210V170ZM50 180H60V190H50V180ZM60 180H70V190H60V180ZM70 180H80V190H70V180ZM80 180H90V190H80V180ZM90 180H100V190H90V180ZM100 180H110V190H100V180ZM110 180H120V190H110V180ZM120 180H130V190H120V180ZM130 180H140V190H130V180ZM140 180H150V190H140V180ZM150 180H160V190H150V180ZM160 180H170V190H160V180ZM170 180H180V190H170V180ZM180 180H190V190H180V180ZM190 180H200V190H190V180ZM200 180H210V190H200V180ZM80 190H90V200H80V190ZM90 190H100V200H90V190ZM100 190H110V200H100V190ZM110 190H120V200H110V190ZM120 190H130V200H120V190ZM130 190H140V200H130V190ZM140 190H150V200H140V190ZM150 190H160V200H150V190ZM160 190H170V200H160V190ZM170 190H180V200H170V190ZM180 190H190V200H180V190Z" fill="#41B883"/>
</g>
<g clip-path="url(#clip1_1955_27259)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
@@ -52,9 +53,12 @@
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<path d="M175 190H89.9996C77.0183 189.997 64.2936 186.384 53.2474 179.565C42.2013 172.746 33.2689 162.989 27.4484 151.386C21.6279 139.783 19.1486 126.79 20.2876 113.858C21.4266 100.927 26.1389 88.5671 33.8981 78.1598C41.6573 67.7526 52.1576 59.7079 64.2257 54.9249C76.2937 50.1418 89.4541 48.8087 102.236 51.0747C115.018 53.3406 126.918 59.1162 136.607 67.7561C146.296 76.396 153.391 87.5598 157.1 100H175C186.934 100 198.38 104.741 206.819 113.18C215.259 121.619 220 133.065 220 145C220 156.935 215.259 168.381 206.819 176.82C198.38 185.259 186.934 190 175 190Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M210 145C210 135.718 206.312 126.815 199.748 120.251C193.184 113.688 184.282 110 175 110H157.1C152.677 110 148.78 107.095 147.517 102.858C144.337 92.1945 138.256 82.6254 129.951 75.2198C121.647 67.8142 111.446 62.8632 100.49 60.921C89.5343 58.9789 78.254 60.1221 67.9101 64.2218C57.5662 68.3215 48.5657 75.2164 41.915 84.1368C35.2644 93.0572 31.2253 103.652 30.249 114.735C29.2727 125.819 31.3977 136.957 36.3867 146.902C41.3757 156.848 49.0319 165.211 58.5 171.056C67.968 176.901 78.8752 179.997 90.0019 180H175C184.282 180 193.184 176.313 199.748 169.749C206.312 163.185 210 154.283 210 145ZM230 145C230 159.587 224.205 173.576 213.891 183.891C203.576 194.205 189.587 200 175 200H89.9971C75.1612 199.996 60.6183 195.867 47.9941 188.074C35.3701 180.281 25.1617 169.131 18.5097 155.87C11.8578 142.609 9.02446 127.759 10.3262 112.981C11.6279 98.2021 17.0133 84.0766 25.8808 72.1827C34.7484 60.2888 46.749 51.0954 60.541 45.629C74.333 40.1627 89.3734 38.639 103.981 41.2286C118.59 43.8182 132.19 50.4189 143.263 60.2931C152.446 68.4822 159.588 78.6562 164.177 90.0001H175C189.587 90.0002 203.576 95.7951 213.891 106.109C224.205 116.424 230 130.413 230 145Z" stroke="black"/>
<defs>
<clipPath id="clip0_1948_26079">
<clipPath id="clip0_1955_27259">
<rect width="220" height="160" fill="white" transform="translate(10 40)"/>
</clipPath>
<clipPath id="clip1_1955_27259">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

12
docs/images/pixel-perfection-subelement-do.svg
View File

@@ -1,5 +1,5 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1936_20350)">
<g clip-path="url(#clip0_1955_26980)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
@@ -47,18 +47,20 @@
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<g clip-path="url(#clip1_1936_20350)">
<g clip-path="url(#clip1_1955_26980)">
<path d="M20 210C19.9992 194.603 24.4413 179.533 32.7935 166.598C41.1456 153.664 53.0527 143.414 67.086 137.08C81.1193 130.745 96.6824 128.595 111.908 130.886C127.133 133.178 141.373 139.815 152.92 150" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100 130C127.614 130 150 107.614 150 80C150 52.3858 127.614 30 100 30C72.3858 30 50 52.3858 50 80C50 107.614 72.3858 130 100 130Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 160V220M220 190H160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M180 220V200H160C154.477 200 150 195.523 150 190C150 184.477 154.477 180 160 180H180V160C180 154.477 184.477 150 190 150C195.523 150 200 154.477 200 160V180H220C225.523 180 230 184.477 230 190C230 195.523 225.523 200 220 200H200V220C200 225.523 195.523 230 190 230C184.477 230 180 225.523 180 220Z" fill="#41B883" fill-opacity="0.2" stroke="#41B883" stroke-dasharray="1 1"/>
<path opacity="0.45" d="M200 180H220V200H200V220H180V200H160V180H180V160H200V180Z" fill="#41B883" fill-opacity="0.5"/>
<path opacity="0.2" d="M200 150V180H230V200H200V230H180V200H150V180H180V150H200Z" fill="#41B883" fill-opacity="0.5"/>
<path d="M190 160V220M220 190H160" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
<rect opacity="0.5" x="140" y="140" width="100" height="100" rx="10" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1936_20350">
<clipPath id="clip0_1955_26980">
<rect width="240" height="240" fill="white"/>
</clipPath>
<clipPath id="clip1_1936_20350">
<clipPath id="clip1_1955_26980">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

10
docs/images/pixel-perfection-subelement-dont.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

30
docs/images/visual-weight-consistent.svg
View File

@@ -1,20 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="88" fill="none" viewBox="0 0 196 88">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M51 35H37a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V37a2 2 0 0 0-2-2"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 47 6 6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 41 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M89 48v5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M89 40v-5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M71 48v5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m71 53 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M71 40v-5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m77 41-6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M116 54c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m155 47 6 6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m155 41 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M161 48v5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M161 40v-5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M143 48v5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m143 53 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M143 40v-5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m149 41-6-6"/>
<svg width="196" height="88" viewBox="0 0 196 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69 35H55C53.8954 35 53 35.8954 53 37V51C53 52.1046 53.8954 53 55 53H69C70.1046 53 71 52.1046 71 51V37C71 35.8954 70.1046 35 69 35Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101 47L107 53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M101 41L107 35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M107 48V53H102" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M107 40V35H102" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89 48V53H94" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89 53L95 47" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89 40V35H94" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95 41L89 35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M134 54C139.523 54 144 49.5228 144 44C144 38.4772 139.523 34 134 34C128.477 34 124 38.4772 124 44C124 49.5228 128.477 54 134 54Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

38
docs/images/visual-weight-uneven.svg
View File

@@ -1,20 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="88" fill="none" viewBox="0 0 196 88">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M51 35H37a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V37a2 2 0 0 0-2-2"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 47 7 7"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m83 41 7-7"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M90 48v6h-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M90 40v-6h-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M70 48v6h6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m70 54 7-7"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M70 40v-6h6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m77 41-7-7"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M116 54c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m154 46 6 6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m154 42 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M160 47v5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M160 41v-5h-5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M144 47v5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m144 52 6-6"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M144 41v-5h5"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m150 42-6-6"/>
<svg width="196" height="88" viewBox="0 0 196 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47 47L54 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47 41L54 34" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M54 48V54H48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M54 40V34H48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 48V54H40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 54L41 47" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 40V34H40" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41 41L34 34" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M87 35H73C71.8954 35 71 35.8954 71 37V51C71 52.1046 71.8954 53 73 53H87C88.1046 53 89 52.1046 89 51V37C89 35.8954 88.1046 35 87 35Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M116 54C121.523 54 126 49.5228 126 44C126 38.4772 121.523 34 116 34C110.477 34 106 38.4772 106 44C106 49.5228 110.477 54 116 54Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M154 46L160 52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M154 42L160 36" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M160 47V52H155" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M160 41V36H155" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M144 47V52H149" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M144 52L150 46" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M144 41V36H149" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M150 42L144 36" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB