Replace composer icons with Compound variants (#123)

Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 4, 2024 · 26b0e83 · 26b0e83
1 parent 7ef8663
commit 26b0e83
Show file tree

Hide file tree

Showing 28 changed files with 146 additions and 155 deletions.
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -65,11 +65,11 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconSource::before {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
     }
 
     .mx_MessageContextMenu_iconQuote::before {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
     }
 
     .mx_MessageContextMenu_iconPin::before {

diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
@@ -265,11 +265,11 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MessageComposer_rich_text::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/rich_text.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
 }
 
 .mx_MessageComposer_location::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/location.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
 }
 
 .mx_MessageComposer_stickers::before {

diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@@ -55,6 +55,7 @@ Please see LICENSE files in the repository root for full details.
         width: 100%;
         mask-repeat: no-repeat;
         mask-position: center;
+        mask-size: 20px;
         background-color: var(--cpd-color-icon-secondary);
     }
 
@@ -63,28 +64,27 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/bold.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconItalic::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/italic.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/strikethrough.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconQuote::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconCode::after {
-        mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
     }
 
     .mx_MessageComposerFormatBar_buttonIconInsertLink::after {
-        mask-image: url("$(res)/img/element-icons/link.svg");
-        mask-size: 18px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
     }
 }
 

diff --git a/res/img/element-icons/room/composer/bold.svg b/res/img/element-icons/room/composer/bold.svg
diff --git a/res/img/element-icons/room/composer/bulleted_list.svg b/res/img/element-icons/room/composer/bulleted_list.svg
diff --git a/res/img/element-icons/room/composer/code_block.svg b/res/img/element-icons/room/composer/code_block.svg
diff --git a/res/img/element-icons/room/composer/indent_decrease.svg b/res/img/element-icons/room/composer/indent_decrease.svg
diff --git a/res/img/element-icons/room/composer/indent_increase.svg b/res/img/element-icons/room/composer/indent_increase.svg
diff --git a/res/img/element-icons/room/composer/inline_code.svg b/res/img/element-icons/room/composer/inline_code.svg
diff --git a/res/img/element-icons/room/composer/italic.svg b/res/img/element-icons/room/composer/italic.svg
diff --git a/res/img/element-icons/room/composer/link.svg b/res/img/element-icons/room/composer/link.svg
diff --git a/res/img/element-icons/room/composer/location.svg b/res/img/element-icons/room/composer/location.svg
diff --git a/res/img/element-icons/room/composer/numbered_list.svg b/res/img/element-icons/room/composer/numbered_list.svg
diff --git a/res/img/element-icons/room/composer/quote.svg b/res/img/element-icons/room/composer/quote.svg
diff --git a/res/img/element-icons/room/composer/rich_text.svg b/res/img/element-icons/room/composer/rich_text.svg
diff --git a/res/img/element-icons/room/composer/strikethrough.svg b/res/img/element-icons/room/composer/strikethrough.svg
diff --git a/res/img/element-icons/room/composer/underline.svg b/res/img/element-icons/room/composer/underline.svg
diff --git a/res/img/element-icons/room/format-bar/bold.svg b/res/img/element-icons/room/format-bar/bold.svg
diff --git a/res/img/element-icons/room/format-bar/code.svg b/res/img/element-icons/room/format-bar/code.svg
diff --git a/res/img/element-icons/room/format-bar/italic.svg b/res/img/element-icons/room/format-bar/italic.svg
diff --git a/res/img/element-icons/room/format-bar/quote.svg b/res/img/element-icons/room/format-bar/quote.svg