Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-04 02:51:20 -05:00
Code Issues Activity

Merge pull request #4845 from penpot/ladybenko-8265-raw-svg-component

Browse source 
RawSVG component (design system) + generate SVG sprite for assets
This commit is contained in:
Eva Marco 2024-07-05 09:44:35 +02:00 • committed by GitHub
commit 9ce3f6da45
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 916 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/.storybook/preview.js
View file

@ -19,6 +19,10 @@ const preview = {
name: "light",
value: "#fff",
},
{
name: "debug",
value: "#ccc",
},
],
},
},

1
frontend/resources/images/assets/brand-github.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 15.674"><path fill="#fff" fill-rule="evenodd" d="M7.976 0C3.566 0 0 3.592 0 8.035a8.03 8.03 0 0 0 5.454 7.623c.396.08.541-.173.541-.385 0-.187-.013-.825-.013-1.49-2.219.479-2.681-.958-2.681-.958-.356-.932-.885-1.171-.885-1.171-.726-.492.053-.492.053-.492.806.053 1.229.825 1.229.825.713 1.223 1.862.878 2.324.665.066-.519.277-.878.502-1.078-1.77-.186-3.632-.878-3.632-3.964 0-.878.317-1.597.819-2.155-.079-.2-.357-1.025.079-2.129 0 0 .674-.213 2.192.825a7.633 7.633 0 0 1 3.988 0c1.519-1.038 2.192-.825 2.192-.825.436 1.104.159 1.929.079 2.129.516.558.819 1.277.819 2.155 0 3.086-1.862 3.765-3.644 3.964.29.253.541.732.541 1.49 0 1.078-.013 1.943-.013 2.208 0 .213.145.466.541.386a8.028 8.028 0 0 0 5.454-7.623C15.952 3.592 12.374 0 7.976 0Z" class="fills" clip-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 852 B

1
frontend/resources/images/assets/brand-gitlab.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" id="screenshot-43864c00-8517-80fc-8004-14a71e4f14d1" fill="none" version="1.1" viewBox="0 0 16 16"><g id="shape-43864c00-8517-80fc-8004-14a71e4f14d1" fill="#000"><defs id="shape-43864c00-8517-80fc-8004-14a71e4f65d8" fill="#000"><style id="shape-43864c00-8517-80fc-8004-14a71e4f65da">.cls-2{fill:#fc6d26}</style></defs><g id="shape-43864c00-8517-80fc-8004-14a71e4f65d9" fill="#000"><g id="shape-43864c00-8517-80fc-8004-14a71e4f65dc"><path id="fills-43864c00-8517-80fc-8004-14a71e4f65dc" fill="#e24329" d="M15.733 6.099Zl-2.2-5.741a.561.561 0 0 0-.224-.269.583.583 0 0 0-.666.035.587.587 0 0 0-.194.294l-1.47 4.498H5.025L3.555.418a.57.57 0 0 0-.194-.294.581.581 0 0 0-.666-.036.57.57 0 0 0-.224.27L.289 6.038l-.022.058a4.043 4.043 0 0 0 1.342 4.673l.007.006.02.014 3.317 2.485 1.642 1.242.999.754a.67.67 0 0 0 .813 0l1-.754 1.641-1.242 3.337-2.5.009-.006a4.045 4.045 0 0 0 1.339-4.669Z" class="fills"/></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65dd"><g id="fills-43864c00-8517-80fc-8004-14a71e4f65dd" class="fills"><path d="M15.733 6.099Zc-1.083.16-2.083.61-2.95 1.259L8 10.974l3.047 2.303 3.337-2.499.008-.007a4.045 4.045 0 0 0 1.341-4.672Z" class="cls-2"/></g></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65de"><path id="fills-43864c00-8517-80fc-8004-14a71e4f65de" fill="#fca326" d="m4.953 13.277 1.642 1.242.999.755a.674.674 0 0 0 .813 0l1-.755 1.641-1.242S9.629 12.203 8 10.974c-1.629 1.229-3.047 2.303-3.047 2.303Z" class="fills"/></g><g id="shape-43864c00-8517-80fc-8004-14a71e4f65df"><g id="fills-43864c00-8517-80fc-8004-14a71e4f65df" class="fills"><path d="M3.217 7.358a7.364 7.364 0 0 0-2.928-1.32l-.022.058a4.043 4.043 0 0 0 1.342 4.673l.007.006.02.014 3.317 2.485L8 10.971Z" class="cls-2"/></g></g></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
frontend/resources/images/assets/brand-google.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/><path fill="none" d="M1 1h22v22H1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 719 B

1
frontend/resources/images/assets/brand-openid.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="#000"><path fill="#b2b2b2" d="M7.339 13.094v.207c-2.477-.311-4.354-1.669-4.354-3.305 0-1.229 1.058-2.3 2.64-2.891l-.062-1.48C2.778 6.328.813 8.019.813 9.996c0 2.384 2.839 4.348 6.529 4.678h.001l-.004-1.58Z" class="fills"/><path fill="#f7931e" d="M9.524 13.647ZL9.521 1.326 7.339 2.445v4.482h.004v7.747Z" class="fills"/><path fill="#b2b2b2" d="m15.187 9.123-.295-3.128-1.123.635c-.798-.485-1.816-1.083-3.144-1.091v1.372c.11.031.216.064.322.098.442.144.849.324 1.208.535l-1.181.664 4.213.915Z" class="fills"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 598 B

1
frontend/resources/images/assets/loader.svg Normal file
View file

@ -0,0 +1 @@
<svg height="182" viewBox="0 0 677.34762 182.15429" width="667" xmlns="http://www.w3.org/2000/svg"><path d="m128.273 0-3.9 2.77-124.373 88.308 128.273 91.076 549.075-.006v-182.14zm20.852 30 498.223.006v122.144l-498.223.007zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"/><path d="m134.482 157.147v25l518.57.008.002-25z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 339 B

686
frontend/resources/images/assets/login-illustration.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 279 KiB

3
frontend/resources/images/assets/logo-error-screen.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="79" xmlns="http://www.w3.org/2000/svg" height="1537" viewBox="2462.648 7069.559 79 1537">
<path d="m2483.255 7069.559-10.973 15.432v1441.521l-9.547 4.535-.087-.039v56.915l37.226 17.564 2.274 1.072 2.276-1.072 37.224-17.564v-56.915l-.07.032-9.55-4.536V7084.991l-.334-.468-10.639-14.964-10.973 15.432v.016l-7.983-11.231-7.923 11.144-.282-.397-10.639-14.964Zm1.941 8.964 4.244 5.968h-12.37l4.195-5.899 3.931-.069Zm37.8 0 4.244 5.968h-12.37l4.193-5.899 3.933-.069Zm-18.956 4.219 4.244 5.968h-12.37l4.194-5.898 3.932-.07Zm-28.143 4.758h5.866v1452.525l-5.866-2.768V7087.5Zm8.878 0h5.838v1456.7l-5.838-2.754V7087.5Zm28.923 0h5.866v1453.925l-5.866 2.768V7087.5Zm8.877 0h5.838v1449.75l-5.838 2.754V7087.5Zm-27.834 4.219h5.866v1457.196l-5.866-2.768V7091.719Zm8.879 0h5.837v1454.476l-5.837 2.754v-1457.23Zm28.407 1439.28 5.165 2.11-5.165 2.437v-4.547Zm-59.745.009v4.544l-5.164-2.436 5.164-2.108Zm-5.084 7.17 32.676 15.416v46.867l-32.676-15.415v-46.868Zm69.901 0v46.868l-32.675 15.415v-46.867l32.675-15.416Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1,020 B

1
frontend/resources/images/assets/penpot-logo-icon.svg Normal file
View file

@ -0,0 +1 @@
<svg height="500" viewBox="0 0 500 500.00001" width="500" xmlns="http://www.w3.org/2000/svg"><path d="m159.4607 552.36219-52.57675 74.05348v41.86098l-45.753774 21.76184-.412151-.19478v17.20283 255.89707l178.379885 84.27239 10.90209 5.1462 10.89926-5.1462 178.38271-84.27239v-273.0999l-.33593.15808-45.76789-21.76749v-41.81863l-1.60059-2.25268-50.97899-71.8008-52.57958 74.05348v.0734l-38.25894-53.88377-37.96254 53.4688-1.35782-1.91111zm9.3015 43.01555 20.33627 28.64128h-59.27553l20.09914-28.30535zm181.13787 0 20.33626 28.64128h-59.27553l20.09632-28.30535zm-90.83852 20.24593 20.33626 28.63846h-59.2727l20.09631-28.30535zm-134.85903 22.82891h28.11339v94.66356l-28.11339-13.2818zm42.54695 0h27.97224l-.003 114.69495-27.97224-13.21405zm138.58809 0h28.11622l-.003 101.38492-28.11057 13.27898-.003-114.6639zm42.54695 0h27.97224v81.3507l-27.97224 13.21406zm-133.38265 20.24311h28.11339v117.07749l-28.11339-13.2818zm42.54695 0h27.97225l-.003 104.02152-27.97224 13.21688.003-117.2384zm136.12651 31.11133 24.75131 10.12014-24.75131 11.6925zm-286.29137.0367v21.80982l-24.748483-11.6925zm-24.367392 34.4113 156.581352 73.96879v224.87888l-156.581352-73.96877zm334.964042 0v224.8789l-156.58134 73.96877v-224.87888z" transform="translate(0 -552.3622)"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
frontend/resources/images/assets/penpot-logo.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 6.4 KiB

1
frontend/resources/images/assets/v2-icon-1.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4494 307 310 290"><path d="m4643.25 309.15-18.86 15.75a9.32 9.32 0 0 0-1.2 13.1 9.26 9.26 0 0 0 13.07 1.2l3.67-3.05.2 82.04a103.8 103.8 0 0 0-14.46-19.07c-15.68-16.23-36.46-25.7-59.17-26.11a86.83 86.83 0 0 0-11.04.52l1.91-3.29a9.32 9.32 0 0 0-3.42-12.57 9.26 9.26 0 0 0-12.6 3.2l-12.59 21.63a9.32 9.32 0 0 0 2.1 11.86l18.93 15.67a9.26 9.26 0 0 0 9.16 1.54 9.32 9.32 0 0 0 2.66-15.9l-4.42-3.66c21.64-2.66 40.4 4.82 55.14 20.07 16.68 17.27 27.77 45.12 27.98 79.86-.05 9.54.04 19.06.07 28.6-10.61-16.53-24.8-30.38-40.13-40.85-15.92-10.87-33.13-18.28-49.55-21.38-8.2-1.55-16.3-2.04-23.93-1.2-2.3.26-4.6.66-6.85 1.2l1.09-2.8a9.27 9.27 0 0 0-17.27-6.77l-9.1 23.32a9.32 9.32 0 0 0 3.91 11.4l21.13 12.53a9.26 9.26 0 0 0 12.54-3.37 9.32 9.32 0 0 0-3.1-12.65l-5.56-3.3c6.54-1.62 14.64-1.77 23.72-.05 13.42 2.53 28.56 8.92 42.53 18.46 27.92 19.09 50.72 50.2 50.72 87.3v.03l.02 5.3a9.3 9.3 0 0 0 9.3 9.29 9.29 9.29 0 0 0 9.25-9.32v-2.77c.5-37.1 19.92-67.3 48.22-89.72 13.17-9.62 27.44-15.99 39.99-18.46 10.08-2 18.76-1.4 25.26 1.19l-4 2.43a9.32 9.32 0 0 0-3.14 12.79 9.26 9.26 0 0 0 12.74 3.14l21.37-13a9.32 9.32 0 0 0 3.78-11.43l-9.17-22.82a9.27 9.27 0 1 0-17.21 6.96l1.72 4.29a50.78 50.78 0 0 0-11.87-2.93c-7.38-.92-15.18-.45-23.06 1.11-15.78 3.1-32.2 10.63-47.34 21.68a142.37 142.37 0 0 0-37.45 40.54l-.07-24.5c.65-34.78 11.26-64.22 26.98-82.93 15.4-18.33 34.64-26.71 56.88-22.07l-4.52 2.74a9.32 9.32 0 0 0-3 12.7 9.26 9.26 0 0 0 12.6 3.22l21.37-12.99a9.32 9.32 0 0 0 3.79-11.43l-9.17-22.83a9.27 9.27 0 0 0-12.08-5.15 9.32 9.32 0 0 0-5.14 12.11l1.5 3.74a73.41 73.41 0 0 0-19.47-1.8c-22.03.99-42.11 12.09-56.95 29.76a115.7 115.7 0 0 0-12.97 19.25l-.2-83.78 3.47 3.03a9.26 9.26 0 0 0 12.97-1.03 9.32 9.32 0 0 0-.8-13.02l-18.87-16.42a9.26 9.26 0 0 0-12.01-.13Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
frontend/resources/images/assets/v2-icon-2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4870 326 249.25 261.8"><path fill="#000" d="M5050.75 326.04a8.57 8.57 0 0 0-7.77 3.58l-19.12 27.03a8.57 8.57 0 0 0 0 9.9l19.12 27.04a8.57 8.57 0 0 0 15.44-3.5 8.57 8.57 0 0 0-1.45-6.4l-8.43-11.92c13.34-.5 22.4 1.84 28.61 5.26 6.78 3.74 10.6 8.83 13.14 14.83 2.54 6 3.51 12.91 3.77 19.07.24 6.16-.26 11.02-.19 15.04a8.57 8.57 0 0 0 8.7 8.43 8.57 8.57 0 0 0 8.44-8.69c-.02-1.7.47-8.1.17-15.49-.3-7.37-1.4-16.26-5.1-25.03a46.95 46.95 0 0 0-20.64-23.17c-9.83-5.43-22.72-8.14-39.22-7.3l10.75-15.21a8.57 8.57 0 0 0-2.05-11.93 8.56 8.56 0 0 0-4.17-1.54Zm-158.97 1.7A21.92 21.92 0 0 0 4870 349.5v61.37a21.92 21.92 0 0 0 21.77 21.78h61.38a21.92 21.92 0 0 0 21.78-21.77v-61.37a21.92 21.92 0 0 0-21.77-21.79h-61.38Zm0 17.13h61.37a4.46 4.46 0 0 1 4.64 4.64v61.37a4.46 4.46 0 0 1-4.63 4.65h-61.38a4.45 4.45 0 0 1-4.63-4.65v-61.37a4.45 4.45 0 0 1 4.63-4.63Zm-5.1 134.52a8.57 8.57 0 0 0-8.43 8.7c.02 1.7-.47 8.1-.17 15.47.3 7.37 1.4 16.26 5.1 25.04a47 47 0 0 0 20.65 23.18c9.83 5.41 22.7 8.14 39.2 7.3l-10.74 15.2a8.57 8.57 0 0 0 8.44 13.4 8.57 8.57 0 0 0 5.56-3.51l19.1-27.04a8.57 8.57 0 0 0 0-9.9l-19.1-27.03a8.57 8.57 0 0 0-5.56-3.5 8.57 8.57 0 0 0-8.44 13.4l8.42 11.92c-13.34.5-22.4-1.82-28.6-5.24-6.78-3.74-10.6-8.83-13.14-14.83-2.54-6.02-3.51-12.92-3.77-19.08-.24-6.16.26-11.02.2-15.03a8.57 8.57 0 0 0-8.71-8.45Zm152.1 1.74a24.6 24.6 0 0 0-24.46 24.46v56.02a24.6 24.6 0 0 0 24.47 24.45h56a24.6 24.6 0 0 0 24.46-24.45v-56.02a24.6 24.6 0 0 0-24.45-24.46h-56.02Zm0 17.14h56.02a7.12 7.12 0 0 1 7.31 7.32v56.02a7.11 7.11 0 0 1-7.31 7.3h-56.02a7.12 7.12 0 0 1-5.23-2.07 7.12 7.12 0 0 1-2.09-5.23v-56.02a7.11 7.11 0 0 1 7.33-7.32Z" class="fills" color="#000" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
frontend/resources/images/assets/v2-icon-3.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4563 696 212.14 362.63"><path d="M4669.07 696a41.22 41.22 0 0 0-29.24 12.07l-64.76 64.75a41.47 41.47 0 0 0 0 58.49l8.39 8.39-8.39 8.38a41.47 41.47 0 0 0 0 58.5l8.38 8.38-8.36 8.37a41.47 41.47 0 0 0 0 58.49l64.73 64.73a41.48 41.48 0 0 0 58.5.01l64.74-64.73a41.49 41.49 0 0 0 0-58.51l-8.37-8.38 8.37-8.37a41.47 41.47 0 0 0 0-58.5l-8.38-8.37 8.39-8.38a41.47 41.47 0 0 0 0-58.5l-64.75-64.75a41.25 41.25 0 0 0-29.25-12.07Zm0 18.28a22.85 22.85 0 0 1 16.2 6.83l64.76 64.75a22.68 22.68 0 0 1 0 32.42l-64.74 64.75a22.68 22.68 0 0 1-32.43.01l-64.76-64.75a22.68 22.68 0 0 1 0-32.43l64.75-64.75a22.86 22.86 0 0 1 16.22-6.83Zm0 52.73c-4.3 0-8.62 1.62-11.85 4.85l-18.35 18.36a16.89 16.89 0 0 0 0 23.7l18.35 18.35a16.89 16.89 0 0 0 23.7 0l18.36-18.35a16.89 16.89 0 0 0-.01-23.7l-18.35-18.35a16.7 16.7 0 0 0-11.85-4.86Zm0 15.19c.34 0 .68.16 1.01.5l18.36 18.35c.66.67.68 1.38.01 2.05l-18.35 18.35c-.67.67-1.4.67-2.06 0l-18.36-18.35c-.66-.66-.65-1.39.01-2.05l18.35-18.35c.34-.33.68-.5 1.03-.5Zm-72.58 70.53 43.33 43.33a41.47 41.47 0 0 0 58.5.01l43.33-43.33 8.37 8.37a22.68 22.68 0 0 1 0 32.42l-64.75 64.75a22.68 22.68 0 0 1-32.43 0l-64.73-64.73a22.68 22.68 0 0 1 0-32.44Zm145.17 75.24 8.37 8.37a22.7 22.7 0 0 1 0 32.45l-64.74 64.74a22.7 22.7 0 0 1-32.44-.01l-64.73-64.74a22.67 22.67 0 0 1 0-32.42l8.36-8.37 43.33 43.33a41.47 41.47 0 0 0 58.5 0Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
frontend/resources/images/assets/v2-icon-4.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="4870 696 216.34 319.12"><path d="M5052.72 696a5.69 5.69 0 0 0-5.8 4.77c-1.72 10.62-4.08 20.19-7.8 27-3.71 6.79-8.19 10.82-15.77 12.25-6.11 1.16-6.17 9.92-.07 11.15 7.97 1.64 12.63 5.72 16.33 12.39 3.7 6.68 5.93 16.05 7.27 26.7.89 6.88 10.98 6.47 11.32-.46.83-18.37 4.47-27.31 8.37-31.76 3.9-4.45 8.67-5.56 15.17-6.85 5.8-1.12 6.24-9.26.6-11.01-7.53-2.35-12.77-6.54-16.73-12.94-3.95-6.4-6.46-15.15-7.41-26.06a5.69 5.69 0 0 0-5.48-5.18Zm-151.65 71.03c-17.13.1-31 13.97-31.07 31.1v185.9a31.21 31.21 0 0 0 31.07 31.09h136.32a31.24 31.24 0 0 0 31.1-31.08V871.7c0-6.01-1.92-12.93-6.51-17.91-21.13-22.9-59.2-64.23-73.79-78.82-4-4.01-10.62-7.95-17.97-7.95Zm0 18.43h65.88v71.29c0 6.42 4.03 12.41 8.53 15.12 4.51 2.71 9.05 3.33 13.15 3.33h61.43v108.83a12.44 12.44 0 0 1-12.67 12.66h-136.32a12.42 12.42 0 0 1-12.65-12.66v-185.9a12.44 12.44 0 0 1 12.65-12.67Zm84.31 13.15a5423.07 5423.07 0 0 1 54.24 58.17h-50.99a8.99 8.99 0 0 1-3.25-.62Z" paint-order="fill markers"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1,012 B

1
frontend/resources/templates/index.mustache
View file

@ -41,6 +41,7 @@
<body>
{{> ../public/images/sprites/symbol/icons.svg }}
{{> ../public/images/sprites/symbol/cursors.svg }}
{{> ../public/images/sprites/assets.svg }}
<div id="app"></div>
<section id="modal"></section>

2
frontend/resources/templates/preview-body.mustache
View file

@ -1 +1,3 @@
{{> ../public/images/sprites/symbol/icons.svg }}
{{> ../public/images/sprites/assets.svg }}

14
frontend/scripts/_helpers.js
View file

@ -307,11 +307,18 @@ async function generateSvgSprites() {
);
const cursors = await findFiles("resources/images/cursors/", isSvgFile);
const cursorsSprite = await generateSvgSprite(icons, "cursor-");
const cursorsSprite = await generateSvgSprite(cursors, "cursor-");
await fs.writeFile(
"resources/public/images/sprites/symbol/cursors.svg",
cursorsSprite,
);
const assets = await findFiles("resources/images/assets/", isSvgFile);
const assetsSprite = await generateSvgSprite(assets, "asset-");
await fs.writeFile(
"resources/public/images/sprites/assets.svg",
assetsSprite,
);
}
async function generateTemplates() {
@ -330,9 +337,14 @@ async function generateTemplates() {
"resources/public/images/sprites/symbol/cursors.svg",
"utf8",
);
const assetsSprite = await fs.readFile(
"resources/public/images/sprites/assets.svg",
"utf-8",
);
const partials = {
"../public/images/sprites/symbol/icons.svg": iconsSprite,
"../public/images/sprites/symbol/cursors.svg": cursorsSprite,
"../public/images/sprites/assets.svg": assetsSprite,
};
const pluginRuntimeUri =

9
frontend/src/app/main/ui/ds.cljs
View file

@ -7,11 +7,16 @@
(ns app.main.ui.ds
(:require
[app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
[app.main.ui.ds.storybook :as sb]))
(def default
"A export used for storybook"
#js {:Icon icon*
:RawSvg raw-svg*
;; meta / misc
:meta #js {:icons icon-list}
:storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}})
:meta #js {:icons icon-list :svgs raw-svg-list}
:storybook #js {:StoryGrid sb/story-grid*
:StoryGridCell sb/story-grid-cell*
:StoryHeader sb/story-header*
:StoryWrapper sb/story-wrapper*}})

2
frontend/src/app/main/ui/ds/foundations/icon.cljs
View file

@ -253,7 +253,7 @@
{::mf/props :obj}
[{:keys [icon size class] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread props {:class class :width icon-size-m :height icon-size-m})
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
size-px (cond (= size "s") icon-size-s :else icon-size-m)
offset (/ (- icon-size-m size-px) 2)]
[:> "svg" props

28
frontend/src/app/main/ui/ds/foundations/icon.stories.jsx
View file

@ -2,7 +2,8 @@ import * as React from "react";
import Components from "@target/components";
const { Icon } = Components;
const { StoryWrapper, IconGrid } = Components.storybook;
const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { icons } = Components.meta;
export default {
@ -17,23 +18,32 @@ const iconList = Object.entries(icons)
export const AllIcons = {
render: () => (
<StoryWrapper theme="default">
<h1>All Icons</h1>
<p>Hover on an icon to see its ID</p>
<IconGrid>
<StoryHeader>
<h1>All Icons</h1>
<p>Hover on an icon to see its ID</p>
</StoryHeader>
<StoryGrid>
{iconList.map((iconId) => (
<div title={iconId} key={iconId}>
<StoryGridCell
title={iconId}
key={iconId}
style={{ color: "var(--color-accent-primary)" }}
>
<Icon icon={iconId} />
</div>
</StoryGridCell>
))}
</IconGrid>
</StoryGrid>
</StoryWrapper>
),
parameters: {
backgrounds: { disable: true },
},
};
export const Default = {
render: () => (
<StoryWrapper theme="default">
<Icon icon="pin" />
<Icon icon={icons.Pin} />
</StoryWrapper>
),
};
@ -41,7 +51,7 @@ export const Default = {
export const Small = {
render: () => (
<StoryWrapper theme="default">
<Icon icon="pin" size="s" />
<Icon icon={icons.Pin} size="s" />
</StoryWrapper>
),
};

21
frontend/src/app/main/ui/ds/foundations/raw_svg.clj Normal file
View file

@ -0,0 +1,21 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(:require
[clojure.core :as c]
[cuerdas.core :as str]
[rumext.v2]))
(defmacro collect-raw-svgs
[]
(let [ns-info (:ns &env)]
`(cljs.core/js-obj
~@(->> (:defs ns-info)
(map val)
(filter (fn [entry] (-> entry :meta :svg-id)))
(mapcat (fn [{:keys [name]}]
[(-> name c/name str/camel str/capital) name]))))))

37
frontend/src/app/main/ui/ds/foundations/raw_svg.cljs Normal file
View file

@ -0,0 +1,37 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(:refer-clojure :exclude [mask])
(:require-macros
[app.common.data.macros :as dm]
[app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
(:require
[rumext.v2 :as mf]))
(def ^:svg-id brand-openid "brand-openid")
(def ^:svg-id brand-github "brand-github")
(def ^:svg-id brand-gitlab "brand-gitlab")
(def ^:svg-id brand-google "brand-google")
(def ^:svg-id loader "loader")
(def ^:svg-id logo "penpot-logo")
(def ^:svg-id logo-icon "penpot-logo-icon")
(def ^:svg-id logo-error-screen "logo-error-screen")
(def ^:svg-id login-illustration "login-illustration")
(def ^:svg-id v2-icon-1 "v2-icon-1")
(def ^:svg-id v2-icon-2 "v2-icon-2")
(def ^:svg-id v2-icon-3 "v2-icon-3")
(def ^:svg-id v2-icon-4 "v2-icon-4")
(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
(mf/defc raw-svg*
{::mf/props :obj}
[{:keys [asset] :rest props}]
[:> "svg" props
[:use {:href (dm/str "#asset-" asset)}]])

28
frontend/src/app/main/ui/ds/foundations/raw_svg.mdx Normal file
View file

@ -0,0 +1,28 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as RawSvgStories from "./raw_svg.stories";
<Meta of={RawSvgStories} />
# SVG Assets
## Technical notes
There are some SVG assets that are not icons or cursors, and that are mostly
meant to be used as is (although depending on the context, some will be required
to be used with a specific color or size).
The assets are located in the `frontend/resources/images/assets` folder.
### Using asset IDs
For convenience, asset IDs are available in the component namespace.
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.raw-svg :as svg]))
```
```clj
[:> svg/svg-asset* {:asset svg/logo}]
```

46
frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx Normal file
View file

@ -0,0 +1,46 @@
import * as React from "react";
import Components from "@target/components";
const { RawSvg } = Components;
const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { svgs } = Components.meta;
export default {
title: "Foundations/RawSvg",
component: Components.RawSvg,
};
const assetList = Object.entries(svgs)
.map(([_, value]) => value)
.sort();
export const AllAssets = {
render: () => (
<StoryWrapper theme="light">
<StoryHeader>
<h1>All assets</h1>
<p>Hover on a asset to see its id.</p>
</StoryHeader>
<StoryGrid size="200">
{assetList.map((x) => (
<StoryGridCell key={x} title={x}>
<RawSvg asset={x} style={{ maxWidth: "100%" }} />
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
),
parameters: {
backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
},
};
export const Default = {
render: () => (
<StoryWrapper theme="default">
<RawSvg asset={svgs.BrandGitlab} width="200" />
</StoryWrapper>
),
};

29
frontend/src/app/main/ui/ds/storybook.cljs
View file

@ -6,7 +6,9 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.storybook
(:require-macros [app.main.style :as stl])
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl])
(:require
[rumext.v2 :as mf]))
@ -20,7 +22,26 @@
[:section {:class "default"} children]
[:section {:class "light"} children]])])
(mf/defc icon-grid*
(mf/defc story-grid*
{::mf/props :obj}
[{:keys [children]}]
[:article {:class (stl/css :icon-grid)} children])
[{:keys [children size style] :rest other}]
(let [class (stl/css :story-grid)
size (or size 16)
style (or style {})
style (mf/spread style :--component-grid-size (dm/str size "px"))
props (mf/spread-props other {:class class :style style})]
[:> "article" props children]))
(mf/defc story-grid-cell*
{::mf/props :obj}
[{:keys [children] :rest other}]
(let [class (stl/css :story-grid-cell)
props (mf/spread-props other {:class class})]
[:> "article" props children]))
(mf/defc story-header*
{::mf/props :obj}
[{:keys [children] :rest other}]
(let [class (stl/css :story-header)
props (mf/spread-props other {:class class})]
[:> "header" props children]))

12
frontend/src/app/main/ui/ds/storybook.scss
View file

@ -5,9 +5,17 @@
row-gap: 1rem;
}
.icon-grid {
.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 16px);
grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px));
gap: 1rem;
color: var(--color-foreground-primary);
}
.story-grid-cell {
max-width: 100%;
}
.story-header {
color: var(--color-foreground-primary);
}