Implemented direct styling for ignored and cut project panel entries

crates/project_panel/src/project_panel.rs

@@ -1015,15 +1015,19 @@ impl ProjectPanel {
         let show_editor = details.is_editing && !details.is_processing;
         MouseEventHandler::<Self>::new(entry_id.to_usize(), cx, |state, cx| {
             let padding = theme.container.padding.left + details.depth as f32 * theme.indent_width;
-            let mut style = theme.entry.style_for(state, details.is_selected).clone();
+
-            if details.is_ignored {
+            let entry_style = if details.is_ignored && details.is_cut {
-                style.text.color.fade_out(theme.ignored_entry_fade);
+                &theme.ignored_and_cut_entry
-                style.icon_color.fade_out(theme.ignored_entry_fade);
+            } else if details.is_ignored {
-            }
+                &theme.ignored_entry
-            if details.is_cut {
+            } else if details.is_cut {
-                style.text.color.fade_out(theme.cut_entry_fade);
+                &theme.cut_entry
-                style.icon_color.fade_out(theme.cut_entry_fade);
+            } else {
-            }
+                &theme.entry
+            };
+
+            let style = entry_style.style_for(state, details.is_selected).clone();
+
             let row_container_style = if show_editor {
                 theme.filename_editor.container
             } else {

crates/theme/src/theme.rs

@@ -326,8 +326,9 @@ pub struct ProjectPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub entry: Interactive<ProjectPanelEntry>,
-    pub cut_entry_fade: f32,
+    pub ignored_entry: Interactive<ProjectPanelEntry>,
-    pub ignored_entry_fade: f32,
+    pub cut_entry: Interactive<ProjectPanelEntry>,
+    pub ignored_and_cut_entry: Interactive<ProjectPanelEntry>,
     pub filename_editor: FieldEditor,
     pub indent_width: f32,
 }

styles/src/styleTree/components.ts

@@ -89,6 +89,7 @@ interface TextProperties {
   size?: keyof typeof fontSizes;
   weight?: FontWeight;
   underline?: boolean;
+  color?: string;
 }
 
 export function text(
@@ -132,11 +133,12 @@ export function text(
   }
 
   let size = fontSizes[properties?.size || "sm"];
+  let color = properties?.color || style.foreground;
 
   return {
     family: fontFamilies[fontFamily],
-    color: style.foreground,
     ...properties,
+    color,
     size,
   };
 }

styles/src/styleTree/projectPanel.ts

@@ -3,11 +3,8 @@ import { background, foreground, text } from "./components";
 
 export default function projectPanel(colorScheme: ColorScheme) {
   let layer = colorScheme.middle;
-  return {
+
-    background: background(layer),
+  let entry = {
-    padding: { left: 12, right: 12, top: 6, bottom: 6 },
-    indentWidth: 8,
-    entry: {
     height: 24,
     iconColor: foreground(layer, "variant"),
     iconSize: 8,
@@ -24,9 +21,25 @@ export default function projectPanel(colorScheme: ColorScheme) {
       background: background(layer, "active"),
       text: text(layer, "mono", "active", { size: "sm" }),
     },
+  };
+
+  return {
+    background: background(layer),
+    padding: { left: 12, right: 12, top: 6, bottom: 6 },
+    indentWidth: 8,
+    entry,
+    ignoredEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ff00cc" }),
+    },
+    cutEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ff00cc" }),
+    },
+    ignoredAndCutEntry: {
+      ...entry,
+      text: text(layer, "mono", "variant", { color: "#ffb700" }),
     },
-    cutEntryFade: 0.4,
-    ignoredEntryFade: 0.6,
     filenameEditor: {
       background: background(layer, "on"),
       text: text(layer, "mono", "on", { size: "sm" }),