Standardise icons using Compound Design Tokens (#28217)

* De-duplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Deduplicate more icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Discard changes to res/css/structures/_RoomSearch.pcss * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Discard changes to res/fonts/Open_Sans/LICENSE.txt * Discard changes to res/css/views/elements/_CopyableText.pcss * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
element-hq · Nov 18, 2024 · 4f8e9eb · 4f8e9eb
1 parent 08f41a4
commit 4f8e9eb
Show file tree

Hide file tree

Showing 50 changed files with 190 additions and 127 deletions.
diff --git a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png
diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_threadsButton::before {
-    mask-image: url("$(res)/img/element-icons/room/thread.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
 }
 
 .mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RightPanel_roomSummaryButton::before {
-    mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
     mask-position: center;
 }
 

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -211,11 +211,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
         }
 
         &.mx_SpaceButton_people .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -426,11 +426,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconLeave::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_SpacePanel_iconMembers::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_SpacePanel_iconPlus::before {

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
@@ -248,7 +248,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceRoomView_privateScope_justMeButton::before {
-            mask-image: url("$(res)/img/element-icons/room/members.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
         }
 
         .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
@@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 
     .mx_UserMenu_iconQr::before {

diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url("$(res)/img/element-icons/message/fwd.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
     }
 
     .mx_MessageContextMenu_iconRedact::before {
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReplyInThread::before {
-        mask-image: url("$(res)/img/element-icons/message/thread.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
     }
 
     .mx_MessageContextMenu_iconReact::before {

diff --git a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss
@@ -1,5 +1,5 @@
 .mx_RoomGeneralContextMenu_iconStar::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,7 +31,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconPeople::before {
-    mask-image: url("$(res)/img/element-icons/room/members.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
@@ -43,29 +43,29 @@
 }
 
 .mx_RoomGeneralContextMenu_iconWidgets::before {
-    mask-image: url("$(res)/img/element-icons/room/apps.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {
-    mask-image: url("$(res)/img/element-icons/export.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconDeveloperTools::before {
     mask-image: url("$(res)/img/element-icons/settings/flask.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconCopyLink::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconSignOut::before {
-    mask-image: url("$(res)/img/element-icons/leave.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
 }
diff --git a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.pcss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                         background-color: $secondary-content;
                         mask-repeat: no-repeat;
                         mask-size: contain;
-                        mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
                         mask-position: center;
                     }
                 }

diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
@@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-repeat: no-repeat;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             mask-position: center;
         }
     }

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_filterPeople::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_filterPublicRooms::before {
@@ -400,7 +400,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
@@ -432,7 +432,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_startChat::before {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             .mx_SpotlightDialog_joinRoomAlias::before {
@@ -512,11 +512,11 @@ Please see LICENSE files in the repository root for full details.
             }
 
             &.mx_SpotlightDialog_metaspaceResult_favourites-space {
-                mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_people-space {
-                mask-image: url("$(res)/img/element-icons/room/members.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_orphans-space {

diff --git a/res/css/views/elements/_InfoTooltip.pcss b/res/css/views/elements/_InfoTooltip.pcss
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InfoTooltip_icon_info::before {
-    mask-image: url("$(res)/img/element-icons/info.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
 }
 
 .mx_InfoTooltip_icon_warning::before {

diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss
@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
             color: var(--cpd-color-icon-primary);
         }
 
+        &.mx_MessageActionBar_threadButton {
+            --MessageActionBar-icon-size: 20px;
+        }
+
         &.mx_MessageActionBar_retryButton {
             --MessageActionBar-icon-size: 16px;
         }

diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -165,7 +165,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ThreadPanel_copyLinkToThread::before {
-    mask-image: url("$(res)/img/element-icons/link.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
 }
 
 .mx_ContextualMenu_wrapper {

diff --git a/res/css/views/rooms/_RoomList.pcss b/res/css/views/rooms/_RoomList.pcss
@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
 }
 .mx_RoomList_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomList_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/share.svg");

diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss
@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
 .mx_RoomListHeader_iconStartChat::before {
-    mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
 .mx_RoomListHeader_iconNewRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");

diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
             mask-repeat: no-repeat;
             mask-position: center;
             mask-size: contain;
-            mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
             background-color: $secondary-content;
         }
     }

diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomTile_contextMenu {
     .mx_RoomTile_iconStar::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
     }
 
     .mx_RoomTile_iconArrowDown::before {
@@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconPeople::before {
-        mask-image: url("$(res)/img/element-icons/room/members.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
     }
 
     .mx_RoomTile_iconFiles::before {
@@ -218,26 +218,26 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconWidgets::before {
-        mask-image: url("$(res)/img/element-icons/room/apps.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
     }
 
     .mx_RoomTile_iconSettings::before {
         mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_RoomTile_iconExport::before {
-        mask-image: url("$(res)/img/element-icons/export.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
     }
 
     .mx_RoomTile_iconCopyLink::before {
-        mask-image: url("$(res)/img/element-icons/link.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 
     .mx_RoomTile_iconInvite::before {
         mask-image: url("$(res)/img/element-icons/room/invite.svg");
     }
 
     .mx_RoomTile_iconSignOut::before {
-        mask-image: url("$(res)/img/element-icons/leave.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
     }
 }
diff --git a/res/css/views/spaces/_SpacePublicShare.pcss b/res/css/views/spaces/_SpacePublicShare.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
         @mixin SpacePillButton;
 
         &.mx_SpacePublicShare_shareButton::before {
-            mask-image: url("$(res)/img/element-icons/link.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
         }
 
         &.mx_SpacePublicShare_inviteButton::before {

diff --git a/res/img/element-icons/export.svg b/res/img/element-icons/export.svg
diff --git a/res/img/element-icons/info.svg b/res/img/element-icons/info.svg
diff --git a/res/img/element-icons/leave.svg b/res/img/element-icons/leave.svg
diff --git a/res/img/element-icons/link.svg b/res/img/element-icons/link.svg
diff --git a/res/img/element-icons/location.svg b/res/img/element-icons/location.svg
diff --git a/res/img/element-icons/message/fwd.svg b/res/img/element-icons/message/fwd.svg
diff --git a/res/img/element-icons/message/thread.svg b/res/img/element-icons/message/thread.svg
diff --git a/res/img/element-icons/room/apps.svg b/res/img/element-icons/room/apps.svg