From d009b37bf1ce169f89051ca38ae47e38d1fc8858 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 5 Mar 2025 19:07:58 +0800
Subject: [PATCH] tab: Add `tab_bar_segemented` theme variable. (#690)

---
 crates/ui/src/tab/tab.rs     | 11 +++++------
 crates/ui/src/tab/tab_bar.rs |  8 +++++---
 crates/ui/src/theme.rs       |  5 +++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/crates/ui/src/tab/tab.rs b/crates/ui/src/tab/tab.rs
index 90cd8501..a0fdf227 100644
--- a/crates/ui/src/tab/tab.rs
+++ b/crates/ui/src/tab/tab.rs
@@ -55,7 +55,7 @@ impl TabVariant {
                 TabVariant::Underline => px(30.),
                 _ => px(24.),
             },
-            Size::Large => px(42.),
+            Size::Large => px(36.),
             _ => match self {
                 TabVariant::Underline => px(36.),
                 _ => px(32.),
@@ -77,7 +77,7 @@ impl TabVariant {
             },
             Size::Large => match self {
                 TabVariant::Tab | TabVariant::Pill => px(36.),
-                TabVariant::Segmented => px(34.),
+                TabVariant::Segmented => px(28.),
                 TabVariant::Underline => px(30.),
             },
             _ => match self {
@@ -197,7 +197,7 @@ impl TabVariant {
             },
             TabVariant::Segmented => TabStyle {
                 fg: cx.theme().tab_foreground,
-                bg: cx.theme().tab_bar,
+                bg: cx.theme().transparent,
                 inner_bg: if selected {
                     cx.theme().background
                 } else {
@@ -246,7 +246,7 @@ impl TabVariant {
             },
             TabVariant::Segmented => TabStyle {
                 fg: cx.theme().tab_active_foreground,
-                bg: cx.theme().tab_bar,
+                bg: cx.theme().transparent,
                 inner_radius: cx.theme().radius,
                 inner_bg: cx.theme().background,
                 shadow: true,
@@ -565,7 +565,6 @@ impl RenderOnce for Tab {
                     .justify_center()
                     .overflow_hidden()
                     .margins(inner_margins)
-                    .text_ellipsis()
                     .flex_shrink_0()
                     .map(|this| match self.icon {
                         Some(icon) => {
@@ -573,7 +572,7 @@ impl RenderOnce for Tab {
                                 .child(icon.map(|this| match self.size {
                                     Size::XSmall => this.size_2p5(),
                                     Size::Small => this.size_3p5(),
-                                    Size::Large => this.size_5(),
+                                    Size::Large => this.size_4(),
                                     _ => this.size_4(),
                                 }))
                         }
diff --git a/crates/ui/src/tab/tab_bar.rs b/crates/ui/src/tab/tab_bar.rs
index 03b862c3..c0239096 100644
--- a/crates/ui/src/tab/tab_bar.rs
+++ b/crates/ui/src/tab/tab_bar.rs
@@ -152,7 +152,7 @@ impl RenderOnce for TabBar {
                     Size::XSmall => px(3.),
                     Size::Small => px(3.),
                     Size::Large => px(6.),
-                    _ => px(4.),
+                    _ => px(5.),
                 };
                 let padding = Edges {
                     left: padding_x,
@@ -160,7 +160,7 @@ impl RenderOnce for TabBar {
                     ..Default::default()
                 };
 
-                (cx.theme().tab_bar, padding, px(2.))
+                (cx.theme().tab_bar_segmented, padding, px(2.))
             }
             TabVariant::Underline => {
                 let padding = Edges::all(px(0.));
@@ -224,7 +224,9 @@ impl RenderOnce for TabBar {
                                     })
                             }),
                     )
-                    .child(self.last_empty_space),
+                    .when(self.variant == TabVariant::Tab, |this| {
+                        this.child(self.last_empty_space)
+                    }),
             )
             .when_some(self.suffix, |this, suffix| this.child(suffix))
     }
diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs
index 7bd3973a..cd747ce6 100644
--- a/crates/ui/src/theme.rs
+++ b/crates/ui/src/theme.rs
@@ -179,6 +179,8 @@ pub struct ThemeColor {
     pub tab_active_foreground: Hsla,
     /// TabBar background color.
     pub tab_bar: Hsla,
+    /// TabBar segmented background color.
+    pub tab_bar_segmented: Hsla,
     /// Tab text color.
     pub tab_foreground: Hsla,
     /// Table background color.
@@ -275,6 +277,7 @@ impl ThemeColor {
             tab_active: hsl(0.0, 0.0, 100.0),
             tab_active_foreground: hsl(240.0, 10., 3.9),
             tab_bar: hsl(240.0, 14.3, 95.9),
+            tab_bar_segmented: hsl(240.0, 14.3, 95.9),
             tab_foreground: hsl(240.0, 10., 33.9),
             table: hsl(0.0, 0.0, 100.),
             table_active: hsl(211.0, 97.0, 85.0).opacity(0.2),
@@ -354,6 +357,7 @@ impl ThemeColor {
             tab_active: hsl(0.0, 0.0, 8.0),
             tab_active_foreground: hsl(0., 0., 78.),
             tab_bar: hsl(299.0, 0., 5.5),
+            tab_bar_segmented: hsl(299.0, 0., 5.5),
             tab_foreground: hsl(0., 0., 78.),
             table: hsl(0.0, 0.0, 8.0),
             table_active: hsl(240.0, 3.7, 15.0).opacity(0.2),
@@ -457,6 +461,7 @@ impl Theme {
         self.tab_active = self.tab_active.apply(mask_color);
         self.tab_foreground = self.tab_foreground.apply(mask_color);
         self.tab_active_foreground = self.tab_active_foreground.apply(mask_color);
+        self.tab_bar_segmented = self.tab_bar_segmented.apply(mask_color);
         self.progress_bar = self.progress_bar.apply(mask_color);
         self.slider_bar = self.slider_bar.apply(mask_color);
         self.slider_thumb = self.slider_thumb.apply(mask_color);