Standardise icons using Compound Design Tokens (#28286)

* Remove stale _LegacyRoomHeader.pcss and icons Signed-off-by: Michael Telatynski <[email protected]> * De-duplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <[email protected]> * Remove stale _LegacyRoomHeader.pcss and icons Signed-off-by: Michael Telatynski <[email protected]> * Remove unused icons Signed-off-by: Michael Telatynski <[email protected]> * Ensure legacy header styles are not used by HTML export Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots & snapshots Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> * Update screenshots Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Nov 14, 2024 · 9a12679 · 9a12679
1 parent 5b0aa51
commit 9a12679
Show file tree

Hide file tree

Showing 68 changed files with 70 additions and 135 deletions.
diff --git a/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png b/playwright/snapshots/register/register.spec.ts/use-case-selection-linux.png
diff --git a/...easeAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png b/...easeAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png
diff --git a/...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
diff --git a/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
diff --git a/...ds-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png b/...ds-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png
diff --git a/...ces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png b/...ces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png
diff --git a/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/...hots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
diff --git a/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/...ight/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
diff --git a/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/...wright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
diff --git a/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/...s/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
diff --git a/...snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/...snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/...shots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
diff --git a/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/...ht/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
diff --git a/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/...right/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
diff --git a/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/...apshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
diff --git a/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/...napshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
diff --git a/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/...shots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-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/components/views/location/_MapError.pcss b/res/css/components/views/location/_MapError.pcss
@@ -53,8 +53,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MapError_icon {
     height: var(--mx-map-error-icon-size);
-
-    path {
-        fill: var(--mx-map-error-icon-color);
-    }
+    width: var(--mx-map-error-icon-size);
+    color: var(--mx-map-error-icon-color);
 }
diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss
@@ -176,7 +176,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_LeftPanel_recentsButton::before {
-                mask-image: url("$(res)/img/element-icons/clock.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
             }
         }
 

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -207,7 +207,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
-            mask-image: url("$(res)/img/element-icons/home.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
         }
 
         &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
@@ -414,15 +414,15 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconHome::before {
-        mask-image: url("$(res)/img/element-icons/home.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
     }
 
     .mx_SpacePanel_iconInvite::before {
         mask-image: url("$(res)/img/element-icons/room/invite.svg");
     }
 
     .mx_SpacePanel_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_SpacePanel_iconLeave::before {

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
@@ -27,13 +27,14 @@ Please see LICENSE files in the repository root for full details.
     &::before {
         position: absolute;
         content: "";
-        width: 24px;
-        height: 24px;
-        top: 27px;
-        left: 20px;
+        width: 28px;
+        height: 28px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 22px;
         mask-position: center;
         mask-repeat: no-repeat;
-        mask-size: 24px;
+        mask-size: 28px;
         background-color: $tertiary-content;
     }
 
@@ -221,7 +222,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 24px;
                         background: $tertiary-content;
                         mask-size: contain;
-                        mask-image: url("$(res)/img/element-icons/settings.svg");
+                        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
                     }
                 }
             }

diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconHome::before {
-        mask-image: url("$(res)/img/element-icons/home.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
     }
 
     .mx_UserMenu_iconDnd::before {
@@ -185,11 +185,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_UserMenu_iconLock::before {
-        mask-image: url("$(res)/img/element-icons/security.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
     }
 
     .mx_UserMenu_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_UserMenu_iconMessage::before {

diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
         mask-size: contain;
         mask-repeat: no-repeat;
         background: $secondary-content;
-        mask-image: url("$(res)/img/globe.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     .mx_DecoratedRoomAvatar_icon_offline::before {

diff --git a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss
@@ -35,7 +35,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconFiles::before {
-    mask-image: url("$(res)/img/element-icons/room/files.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconPins::before {
@@ -47,7 +47,7 @@
 }
 
 .mx_RoomGeneralContextMenu_iconSettings::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
 }
 
 .mx_RoomGeneralContextMenu_iconExport::before {

diff --git a/res/css/views/dialogs/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss
@@ -41,14 +41,13 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_JoinRuleDropdown_invite::before {
         box-sizing: border-box;
-        mask-image: url("$(res)/img/element-icons/lock.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
         mask-size: contain;
         padding: 1px;
     }
 
     .mx_JoinRuleDropdown_public::before {
-        mask-image: url("$(res)/img/globe.svg");
-        mask-size: 12px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     .mx_JoinRuleDropdown_restricted::before {

diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss
@@ -9,15 +9,15 @@ Please see LICENSE files in the repository root for full details.
 /* ========================================================== */
 
 .mx_RoomSettingsDialog_settingsIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
 }
 
 .mx_RoomSettingsDialog_voiceIcon::before {
     mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
 }
 
 .mx_RoomSettingsDialog_securityIcon::before {
-    mask-image: url("$(res)/img/element-icons/security.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
 }
 
 .mx_RoomSettingsDialog_rolesIcon::before {
@@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
 .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
-    mask: url("$(res)/img/feather-customised/image.svg");
+    mask: url("@vector-im/compound-design-tokens/icons/image.svg");
     mask-repeat: no-repeat;
     mask-size: 36px;
     mask-position: center;

diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
@@ -74,7 +74,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_TabbedView_tabLabel {
         .mx_SpaceSettingsDialog_generalIcon::before {
-            mask-image: url("$(res)/img/element-icons/settings.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
         }
 
         .mx_SpaceSettingsDialog_visibilityIcon::before {

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -508,7 +508,7 @@ Please see LICENSE files in the repository root for full details.
             mask-size: contain;
 
             &.mx_SpotlightDialog_metaspaceResult_home-space {
-                mask-image: url("$(res)/img/element-icons/home.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
             }
 
             &.mx_SpotlightDialog_metaspaceResult_favourites-space {

diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss
@@ -125,7 +125,7 @@ $button-gap: 24px;
 }
 
 .mx_ImageView_button_download::before {
-    mask-image: url("$(res)/img/image-view/download.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/download.svg");
 }
 
 .mx_ImageView_button_more::before {

diff --git a/res/css/views/elements/_MiniAvatarUploader.pcss b/res/css/views/elements/_MiniAvatarUploader.pcss
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $secondary-content;
             mask-position: center;
             mask-repeat: no-repeat;
-            mask-image: url("$(res)/img/element-icons/camera.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
             mask-size: 16px;
             z-index: 2;
         }

diff --git a/res/css/views/elements/_UseCaseSelectionButton.pcss b/res/css/views/elements/_UseCaseSelectionButton.pcss
@@ -48,7 +48,8 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_UseCaseSelectionButton_community::before {
-            mask-image: url("$(res)/img/globe.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
+            mask-size: 24px;
         }
     }
 

diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
@@ -296,7 +296,7 @@ Please see LICENSE files in the repository root for full details.
         top: 8px;
         left: 9px;
 
-        mask-image: url("$(res)/img/element-icons/send-message.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;

diff --git a/res/css/views/rooms/_RoomCallBanner.pcss b/res/css/views/rooms/_RoomCallBanner.pcss
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         background-color: $secondary-content;
         mask-size: 16px;
-        mask-position-y: center;
+        mask-position: center;
         width: 16px;
         height: 1.2em; /* to match line height */
         margin-right: 8px;

diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss
@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         display: inline-block;
         height: 1.2em;
-        mask-position-y: center;
+        mask-position: center;
         mask-repeat: no-repeat;
         background-color: $tertiary-content;
         vertical-align: text-bottom;
@@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
     &.mx_RoomInfoLine_public::before {
         width: 12px;
         mask-size: 12px;
-        mask-image: url("$(res)/img/globe.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
     }
 
     &.mx_RoomInfoLine_private::before {
         width: 10px;
         mask-size: 10px;
-        mask-image: url("$(res)/img/element-icons/lock.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
     }
 
     &.mx_RoomInfoLine_video::before {

diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss
@@ -210,7 +210,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconFiles::before {
-        mask-image: url("$(res)/img/element-icons/room/files.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
     }
 
     .mx_RoomTile_iconPins::before {
@@ -222,7 +222,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_iconSettings::before {
-        mask-image: url("$(res)/img/element-icons/settings.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
     }
 
     .mx_RoomTile_iconExport::before {

diff --git a/res/css/views/spaces/_SpaceBasicSettings.pcss b/res/css/views/spaces/_SpaceBasicSettings.pcss
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                 mask-repeat: no-repeat;
                 mask-position: center;
                 mask-size: 20px;
-                mask-image: url("$(res)/img/element-icons/camera.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
             }
         }
 

diff --git a/res/css/views/spaces/_SpaceCreateMenu.pcss b/res/css/views/spaces/_SpaceCreateMenu.pcss
@@ -39,12 +39,11 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpaceCreateMenuType_public::before {
-            mask-image: url("$(res)/img/globe.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
         }
 
         .mx_SpaceCreateMenuType_private::before {
-            mask-image: url("$(res)/img/element-icons/lock.svg");
-            mask-size: 18px;
+            mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
         }
 
         .mx_SpaceCreateMenu_back {

diff --git a/res/css/views/voip/_LegacyCallViewHeader.pcss b/res/css/views/voip/_LegacyCallViewHeader.pcss
@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
 
     &.mx_LegacyCallViewHeader_button_fullscreen {
         &::before {
-            mask-image: url("$(res)/img/element-icons/call/fullscreen.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
         }
     }
 
@@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
 
     &.mx_LegacyCallViewHeader_button_expand {
         &::before {
-            mask-image: url("$(res)/img/element-icons/call/expand.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
         }
     }
 }

diff --git a/res/img/download.svg b/res/img/download.svg
diff --git a/res/img/element-icons/call/expand.svg b/res/img/element-icons/call/expand.svg
diff --git a/res/img/element-icons/call/fullscreen.svg b/res/img/element-icons/call/fullscreen.svg
diff --git a/res/img/element-icons/camera.svg b/res/img/element-icons/camera.svg
diff --git a/res/img/element-icons/clock.svg b/res/img/element-icons/clock.svg
diff --git a/res/img/element-icons/home.svg b/res/img/element-icons/home.svg
diff --git a/res/img/element-icons/lock.svg b/res/img/element-icons/lock.svg
diff --git a/res/img/element-icons/security.svg b/res/img/element-icons/security.svg
diff --git a/res/img/element-icons/send-message.svg b/res/img/element-icons/send-message.svg