add muted_hover token and rework tab strip visuals

crates/data/Cargo.toml

@@ -19,5 +19,9 @@ default = ["full"]
 full = ["list", "sidebar", "tabs", "tree"]
 list = []
 sidebar = []
-tabs = ["dep:gpui-native-core", "gpui-native-core/button"]
+tabs = [
+    "dep:gpui-native-core",
+    "gpui-native-core/button",
+    "gpui-native-core/tooltip",
+]
 tree = []

crates/data/src/tabs.rs

@@ -8,6 +8,7 @@ use gpui::{
 };
 use gpui_native_core::button::{Button, ButtonVariant};
 use gpui_native_core::common::Sizable as _;
+use gpui_native_core::tooltip::Tooltip;
 use gpui_native_icons::{IconRole, icon};
 use gpui_native_theme::{ActiveTheme as _, Size};
 use gpui_native_utils::adjacent_selectable;
@@ -277,6 +278,7 @@ fn render_tab(
 
     let theme = cx.theme();
     let metrics = theme.sizes.resolve(Size::default());
+    let small = theme.sizes.small;
 
     let label_color = match variant {
         TabsVariant::Underline => {
@@ -319,36 +321,41 @@ fn render_tab(
             .py_1()
             .rounded_tl(theme.radius.sm)
             .rounded_tr(theme.radius.sm)
+            .border_b_2()
+            .border_color(gpui::transparent_black())
             .when(selected, |strip_tab| {
-                strip_tab
-                    .border_b_2()
-                    .border_color(theme.ramps.primary.base)
+                strip_tab.border_color(theme.ramps.primary.base)
             }),
         TabsVariant::Pill => strip_tab
-            .h(metrics.control_height)
-            .px(metrics.padding_x)
+            .h(small.control_height + metrics.plate_inset * 2.0)
+            .px(metrics.dense_padding_x)
+            .pr(metrics.plate_inset)
             .rounded(theme.radius.control)
             .when(selected, |strip_tab| {
                 strip_tab
                     .bg(theme.colors.muted)
-                    .font_weight(gpui::FontWeight::MEDIUM)
+                    .hover(|strip_tab| strip_tab.bg(theme.colors.muted_hover))
             }),
     };
 
     let lead = tab.lead.take();
+
     strip_tab = match lead {
         Some(lead) => strip_tab.child(lead),
-        None => strip_tab.child(
-            div()
-                .flex_none()
-                .when(variant == TabsVariant::Underline, |slot| slot.pb_0p5())
-                .when_some(tab.icon, |slot, role| {
+        None => match variant {
+            TabsVariant::Underline => strip_tab.child(div().flex_none().pb_0p5().when_some(
+                tab.icon,
+                |slot, role| {
                     slot.child(icon(role).size(metrics.dense_icon_size).color(label_color))
-                }),
-        ),
+                },
+            )),
+            TabsVariant::Pill => strip_tab.when_some(tab.icon, |strip_tab, role| {
+                strip_tab.child(icon(role).size(metrics.dense_icon_size).color(label_color))
+            }),
+        },
     };
 
-    strip_tab = strip_tab.child(strip_tab_label(&tab, selected, variant, cx));
+    strip_tab = strip_tab.child(tab.label.clone());
 
     if variant == TabsVariant::Pill {
         strip_tab = strip_tab.child(div().flex_none().w(metrics.padding_x * 1.5));
@@ -389,55 +396,26 @@ fn render_tab_close(
     index: usize,
     on_close: &Option<CloseHandler>,
 ) -> AnyElement {
-    // The wrapper carries the test selector; the button paints itself.
-    div()
-        .id(("tab-close", index))
+    Button::new(("tab-close", index))
+        .icon(IconRole::Close)
+        .variant(ButtonVariant::Ghost)
+        .small()
+        .tab_stop(false)
         .debug_selector({
             let id = format!("{tabs_id}-close-{}", tab.label);
-            move || id
+            move || id.clone()
         })
-        .flex_none()
-        .child(
-            Button::new(("tab-close-button", index))
-                .icon(IconRole::Close)
-                .variant(ButtonVariant::Ghost)
-                .small()
-                .tab_stop(false)
-                .accessibility_label(SharedString::from(format!("Close {}", tab.label)))
-                .on_click({
-                    let on_close = on_close.clone();
-                    move |_, window, cx| {
-                        cx.stop_propagation();
-                        if let Some(on_close) = &on_close {
-                            on_close(index, window, cx);
-                        }
-                    }
-                }),
-        )
-        .into_any_element()
-}
-
-fn strip_tab_label(tab: &Tab, selected: bool, variant: TabsVariant, cx: &App) -> AnyElement {
-    let theme = cx.theme();
-    let color = match variant {
-        TabsVariant::Underline => {
-            if selected {
-                theme.ramps.primary.base
-            } else {
-                theme.colors.foreground
+        .tooltip(Tooltip::text("Close"))
+        .accessibility_label(SharedString::from(format!("Close {}", tab.label)))
+        .on_click({
+            let on_close = on_close.clone();
+            move |_, window, cx| {
+                cx.stop_propagation();
+                if let Some(on_close) = &on_close {
+                    on_close(index, window, cx);
+                }
             }
-        }
-        TabsVariant::Pill => {
-            if tab.disabled {
-                theme.colors.muted_foreground
-            } else {
-                theme.colors.foreground
-            }
-        }
-    };
-    div()
-        .text_color(color)
-        .child(tab.label.clone())
+        })
         .into_any_element()
 }