imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deduplicate icons using Compound Design Tokens (#150)

Browse source 
* Deduplicate icons using Compound Design Tokens

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-14 17:54:15 +01:00 • committed by GitHub
parent 63986f8c42
commit d770e2afcc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 82 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_AutocompleteInput.pcss
View file

@ -69,8 +69,8 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
}
.mx_AutocompleteInput_editor_selection_remove_button {
padding: 0 $spacing-4;
.mx_AutocompleteInput_editor_selection_remove_button svg {
vertical-align: middle;
}
.mx_AutocompleteInput_matches {

10
res/css/structures/_RoomSearch.pcss
View file

@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
cursor: pointer;
.mx_RoomSearch_icon {
width: 16px;
height: 16px;
mask: url("$(res)/img/element-icons/roomlist/search.svg");
width: 20px;
height: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
mask-repeat: no-repeat;
mask-size: contain;
background-color: $secondary-content;
margin-left: 7px;
margin-bottom: 2px;
margin-left: var(--cpd-space-2x);
flex-shrink: 0;
}

5
res/css/views/auth/_AuthBody.pcss
View file

@ -53,13 +53,14 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_icon {
width: 40px;
width: 44px;
height: 44px;
}
.mx_AuthBody_lockIcon {
color: $secondary-content;
height: 32px;
margin-bottom: -3px; /* tweak to align all icons on different forgot password steps */
width: 32px;
}
.mx_AuthBody_text {

5
res/css/views/dialogs/_InviteDialog.pcss
View file

@ -174,8 +174,11 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_userTile_remove {
display: inline-block;
margin-inline-start: $spacing-4;
vertical-align: middle;
svg {
vertical-align: middle;
}
}
}

3
res/img/compound/checkbox-32px.svg
View file

@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.0918 17.0489L11.6069 23.7576L26.91 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 243 B

3
res/img/compound/error-16px.svg
View file

@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM6.77698 4.13517C6.71698 3.45117 7.22098 2.85117 7.90498 2.80317C8.57698 2.75517 9.17698 3.25917 9.24898 3.94317V4.13517L8.86498 8.93517C8.82898 9.37917 8.45698 9.71517 8.01298 9.71517H7.94098C7.52098 9.67917 7.19698 9.35517 7.16098 8.93517L6.77698 4.13517ZM9.0564 12.0673C9.0564 12.6505 8.58361 13.1233 8.0004 13.1233C7.41719 13.1233 6.9444 12.6505 6.9444 12.0673C6.9444 11.4841 7.41719 11.0113 8.0004 11.0113C8.58361 11.0113 9.0564 11.4841 9.0564 12.0673Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 741 B

3
res/img/compound/padlock-32px.svg
View file

@ -1,3 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3333 1.85156C10.2958 1.85156 7.83333 4.314 7.83333 7.35156V13.1742H7C5.34315 13.1742 4 14.5174 4 16.1742V27.6666C4 29.3234 5.34315 30.6666 7 30.6666H25C26.6569 30.6666 28 29.3234 28 27.6666V16.1742C28 14.5174 26.6569 13.1742 25 13.1742H24.1667V7.35156C24.1667 4.314 21.7042 1.85156 18.6667 1.85156H13.3333ZM21.1667 13.1742V7.35156C21.1667 5.97085 20.0474 4.85156 18.6667 4.85156H13.3333C11.9526 4.85156 10.8333 5.97085 10.8333 7.35156V13.1742H21.1667Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 631 B

3
res/img/element-icons/Email-icon.svg
View file

@ -1,3 +0,0 @@
<svg width="40" height="29" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.260962 2.57584L18.9049 21.1615C19.5449 21.7995 20.5805 21.7995 21.2205 21.1615L39.7726 2.66735C39.9199 3.08419 40 3.53274 40 4V25C40 27.2091 38.2091 29 36 29H4C1.79086 29 0 27.2091 0 25V4C0 3.49835 0.0923447 3.01827 0.260962 2.57584ZM2.58227 0.258515C3.02293 0.0914515 3.50079 0 4 0H36C36.5334 0 37.0424 0.104395 37.5077 0.293868L20.0627 17.6843L2.58227 0.258515Z" fill="#737D8C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 537 B

3
res/img/element-icons/roomlist/search.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1333 8.06667C12.1333 10.3126 10.3126 12.1333 8.06667 12.1333C5.82071 12.1333 4 10.3126 4 8.06667C4 5.82071 5.82071 4 8.06667 4C10.3126 4 12.1333 5.82071 12.1333 8.06667ZM12.9992 11.5994C13.7131 10.6044 14.1333 9.38463 14.1333 8.06667C14.1333 4.71614 11.4172 2 8.06667 2C4.71614 2 2 4.71614 2 8.06667C2 11.4172 4.71614 14.1333 8.06667 14.1333C9.38457 14.1333 10.6043 13.7131 11.5992 12.9993C11.6274 13.0369 11.6586 13.0729 11.6928 13.1071L14.2928 15.7071C14.6833 16.0977 15.3165 16.0977 15.707 15.7071C16.0975 15.3166 16.0975 14.6834 15.707 14.2929L13.107 11.6929C13.0728 11.6587 13.0368 11.6276 12.9992 11.5994Z" fill="black"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 772 B

6
res/img/feather-customised/help-circle.svg
View file

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<circle cx="6" cy="6" r="6"/>
<path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 357 B

1
res/img/icon-pill-remove.svg
View file

@ -1 +0,0 @@
<svg width="58" height="60" viewBox="26 25 6 6" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-5.9%" y="-7.9%" width="111.8%" height="115.8%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="16" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-406 -215)" stroke="#61708B"><path d="M438 240l-6 6M432 240l6 6"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 693 B

13
res/img/plus.svg
View file

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>Line + Line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
<path d="M4,0.228763834 L4,7.77123617" id="Line" sketch:type="MSShapeGroup"></path>
<path d="M0.228763834,4 L7.77123617,4" id="Line" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 912 B