Use text color to paint SVGs

Antonio Scandurra created 2 years ago

Change summary

crates/gpui3/src/elements/svg.rs          | 11 +++++------
crates/storybook2/src/collab_panel.rs     |  2 +-
crates/storybook2/src/workspace.rs        | 22 +++++++++++-----------
crates/ui2/src/components/collab_panel.rs |  2 +-
crates/ui2/src/elements/icon.rs           |  5 ++++-
5 files changed, 22 insertions(+), 20 deletions(-)

Detailed changes

crates/gpui3/src/elements/svg.rs

@@ -84,14 +84,13 @@ where
         Self: Sized,
     {
         self.base.paint(bounds, view, element_state, cx);
-        let fill_color = self
+        let color = self
             .base
             .compute_style(bounds, element_state, cx)
-            .fill
-            .as_ref()
-            .and_then(|fill| fill.color());
-        if let Some((path, fill_color)) = self.path.as_ref().zip(fill_color) {
-            cx.paint_svg(bounds, path.clone(), fill_color).log_err();
+            .text
+            .color;
+        if let Some((path, color)) = self.path.as_ref().zip(color) {
+            cx.paint_svg(bounds, path.clone(), color).log_err();
         }
     }
 }

crates/storybook2/src/collab_panel.rs

@@ -144,7 +144,7 @@ impl CollabPanel {
                         })
                         .w_3p5()
                         .h_3p5()
-                        .fill(theme.middle.variant.default.foreground),
+                        .text_color(theme.middle.variant.default.foreground),
                 ),
             )
     }

crates/storybook2/src/workspace.rs

@@ -215,7 +215,7 @@ impl Titlebar {
                             svg()
                                 .path("icons/exit.svg")
                                 .size_4()
-                                .fill(theme.lowest.base.default.foreground),
+                                .text_color(theme.lowest.base.default.foreground),
                         ),
                     ),
                 ),
@@ -245,7 +245,7 @@ impl Titlebar {
                                     svg()
                                         .path("icons/mic.svg")
                                         .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
+                                        .text_color(theme.lowest.base.default.foreground),
                                 ),
                         )
                         .child(
@@ -265,7 +265,7 @@ impl Titlebar {
                                     svg()
                                         .path("icons/speaker-loud.svg")
                                         .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
+                                        .text_color(theme.lowest.base.default.foreground),
                                 ),
                         )
                         .child(
@@ -285,7 +285,7 @@ impl Titlebar {
                                     svg()
                                         .path("icons/desktop.svg")
                                         .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
+                                        .text_color(theme.lowest.base.default.foreground),
                                 ),
                         ),
                 ),
@@ -318,7 +318,7 @@ impl Titlebar {
                                 .path("icons/caret_down.svg")
                                 .w_2()
                                 .h_2()
-                                .fill(theme.lowest.variant.default.foreground),
+                                .text_color(theme.lowest.variant.default.foreground),
                         ),
                 ),
             )
@@ -374,7 +374,7 @@ mod statusbar {
                                     .path("icons/project.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
+                                    .text_color(theme.lowest.base.default.foreground),
                             ),
                     )
                     .child(
@@ -389,7 +389,7 @@ mod statusbar {
                                     .path("icons/conversations.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
+                                    .text_color(theme.lowest.base.default.foreground),
                             ),
                     )
                     .child(
@@ -404,7 +404,7 @@ mod statusbar {
                                     .path("icons/file_icons/notebook.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
+                                    .text_color(theme.lowest.accent.default.foreground),
                             ),
                     ),
             )
@@ -432,7 +432,7 @@ mod statusbar {
                                     .path("icons/error.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.negative.default.foreground),
+                                    .text_color(theme.lowest.negative.default.foreground),
                             )
                             .child(div().text_sm().child("2")),
                     )
@@ -473,7 +473,7 @@ mod statusbar {
                                     .path("icons/check_circle.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
+                                    .text_color(theme.lowest.base.default.foreground),
                             ),
                     )
                     .child(
@@ -488,7 +488,7 @@ mod statusbar {
                                     .path("icons/copilot.svg")
                                     .w_4()
                                     .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
+                                    .text_color(theme.lowest.accent.default.foreground),
                             ),
                     ),
             )

crates/ui2/src/components/collab_panel.rs

@@ -121,7 +121,7 @@ impl<S: 'static + Send + Sync + Clone> CollabPanel<S> {
                         })
                         .w_3p5()
                         .h_3p5()
-                        .fill(theme.middle.variant.default.foreground),
+                        .text_color(theme.middle.variant.default.foreground),
                 ),
             )
     }

crates/ui2/src/elements/icon.rs

@@ -183,7 +183,10 @@ impl<S: 'static + Send + Sync> IconElement<S> {
             IconSize::Large => svg().size_4(),
         };
 
-        sized_svg.flex_none().path(self.icon.path()).fill(fill)
+        sized_svg
+            .flex_none()
+            .path(self.icon.path())
+            .text_color(fill)
     }
 }