dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: Update secondary color and fix toggle selected color. (#1039)

Browse source 
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/9ec4f4ea-f318-4db6-b9cd-7911cc4f9462"
/>
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/85d52c62-1e51-49d3-905e-30865555cfd8"
/>

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/eb71f364-730d-4f55-a84d-95235a3545f0"
/>
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/3383e8f7-500d-4348-b391-c764a35fd6a9"
/>
This commit is contained in:
Jason Lee 2025-07-03 19:23:40 +08:00 committed by GitHub
parent 6886ae746e
commit 1069469c46
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 204 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/story/src/button_story.rs
View file

@ -626,7 +626,7 @@ impl Render for ButtonStory {
.child(
section("Button Group").child(
ButtonGroup::new("button-group")
.small()
.outline()
.disabled(disabled)
.child(
Button::new("button-one")

4
crates/story/src/color_picker_story.rs
View file

@ -5,7 +5,7 @@ use gpui::{
use gpui_component::{
blue_500,
color_picker::{ColorPicker, ColorPickerEvent, ColorPickerState},
green_500, red_500, v_flex, yellow_500, Colorize,
green_500, red_500, v_flex, yellow_500, Colorize, Sizable,
};
use crate::section;
@ -64,7 +64,7 @@ impl Render for ColorPickerStory {
v_flex().gap_3().child(
section("Normal")
.max_w_md()
.child(ColorPicker::new(&self.color).featured_colors(vec![
.child(ColorPicker::new(&self.color).small().featured_colors(vec![
red_500(),
blue_500(),
green_500(),

3
crates/story/src/description_list_story.rs
View file

@ -19,7 +19,7 @@ use serde::Deserialize;
struct ChangeSize(Size);
pub struct DescriptionListStory {
focus_handle: gpui::FocusHandle,
focus_handle: FocusHandle,
layout: Axis,
bordered: bool,
size: Size,
@ -149,6 +149,7 @@ impl Render for DescriptionListStory {
.child(
Button::new("size")
.small()
.outline()
.label(format!("size: {:?}", self.size))
.popup_menu({
let size = self.size;

6
crates/story/src/drawer_story.rs
View file

@ -430,6 +430,7 @@ impl Render for DrawerStory {
section("Normal Drawer")
.child(
Button::new("show-drawer-left")
.outline()
.label("Left Drawer...")
.on_click(cx.listener(|this, _, window, cx| {
this.open_drawer_at(Placement::Left, window, cx)
@ -437,6 +438,7 @@ impl Render for DrawerStory {
)
.child(
Button::new("show-drawer-top")
.outline()
.label("Top Drawer...")
.on_click(cx.listener(|this, _, window, cx| {
this.open_drawer_at(Placement::Top, window, cx)
@ -444,6 +446,7 @@ impl Render for DrawerStory {
)
.child(
Button::new("show-drawer-right")
.outline()
.label("Right Drawer...")
.on_click(cx.listener(|this, _, window, cx| {
this.open_drawer_at(Placement::Right, window, cx)
@ -451,6 +454,7 @@ impl Render for DrawerStory {
)
.child(
Button::new("show-drawer-bottom")
.outline()
.label("Bottom Drawer...")
.on_click(cx.listener(|this, _, window, cx| {
this.open_drawer_at(Placement::Bottom, window, cx)
@ -463,6 +467,7 @@ impl Render for DrawerStory {
.child(TextInput::new(&self.input2))
.child(
Button::new("test-action")
.outline()
.label("Test Action")
.flex_shrink_0()
.on_click(|_, window, cx| {
@ -478,6 +483,7 @@ impl Render for DrawerStory {
.child(
section("WebView in Drawer").child(
Button::new("webview")
.outline()
.label("Open WebView")
.on_click(cx.listener(|_, _, window, cx| {
let webview = cx.new(|cx| {

1
crates/story/src/form_story.rs
View file

@ -123,6 +123,7 @@ impl Render for FormStory {
)
.child(
ButtonGroup::new("size")
.outline()
.small()
.child(
Button::new("large")

1
crates/story/src/image_story.rs
View file

@ -68,6 +68,7 @@ impl Render for ImageStory {
.size_full()
.child(
Button::new("switch")
.outline()
.label("Switch SVG")
.on_click(cx.listener(|this, _: &ClickEvent, _, cx| {
this.svg_index += 1;

3
crates/story/src/list_story.rs
View file

@ -371,6 +371,7 @@ impl Render for ListStory {
.flex_wrap()
.child(
Button::new("scroll-top")
.outline()
.child("Scroll to Top")
.small()
.on_click(cx.listener(|this, _, window, cx| {
@ -381,6 +382,7 @@ impl Render for ListStory {
)
.child(
Button::new("scroll-bottom")
.outline()
.child("Scroll to Bottom")
.small()
.on_click(cx.listener(|this, _, window, cx| {
@ -395,6 +397,7 @@ impl Render for ListStory {
)
.child(
Button::new("scroll-to-selected")
.outline()
.child("Scroll to Selected")
.small()
.on_click(cx.listener(|this, _, window, cx| {

104
crates/story/src/menu_story.rs
View file

@ -128,61 +128,64 @@ impl Render for MenuStory {
.gap_6()
.child(
section("Popup Menu")
.child(Button::new("popup-menu-1").label("Edit").popup_menu(
move |this, window, cx| {
this.link("About", "https://github.com/longbridge/gpui-component")
.separator()
.menu("Copy", Box::new(Copy))
.menu("Cut", Box::new(Cut))
.menu("Paste", Box::new(Paste))
.separator()
.menu_with_check("Toggle Check", checked, Box::new(ToggleCheck))
.separator()
.menu_with_icon("Search", IconName::Search, Box::new(SearchAll))
.separator()
.menu_element(Box::new(Info(0)), |_, cx| {
v_flex().child("Custom Element").child(
div()
.text_xs()
.text_color(cx.theme().muted_foreground)
.child("THis is sub-title"),
)
})
.menu_element_with_check(checked, Box::new(Info(0)), |_, cx| {
h_flex().gap_1().child("Custom Element").child(
div()
.text_xs()
.text_color(cx.theme().muted_foreground)
.child("checked"),
)
})
.menu_element_with_icon(
IconName::Info,
Box::new(Info(0)),
|_, cx| {
h_flex().gap_1().child("Custom").child(
.child(
Button::new("popup-menu-1")
.outline()
.label("Edit")
.popup_menu(move |this, window, cx| {
this.link("About", "https://github.com/longbridge/gpui-component")
.separator()
.menu("Copy", Box::new(Copy))
.menu("Cut", Box::new(Cut))
.menu("Paste", Box::new(Paste))
.separator()
.menu_with_check("Toggle Check", checked, Box::new(ToggleCheck))
.separator()
.menu_with_icon("Search", IconName::Search, Box::new(SearchAll))
.separator()
.menu_element(Box::new(Info(0)), |_, cx| {
v_flex().child("Custom Element").child(
div()
.text_sm()
.text_xs()
.text_color(cx.theme().muted_foreground)
.child("element"),
.child("THis is sub-title"),
)
},
)
.separator()
.menu_with_disabled("Disabled Item", Box::new(Info(0)), true)
.separator()
.submenu("Links", window, cx, |menu, _, _| {
menu.link_with_icon(
"GitHub Repository",
IconName::GitHub,
"https://github.com/longbridge/gpui-component",
})
.menu_element_with_check(checked, Box::new(Info(0)), |_, cx| {
h_flex().gap_1().child("Custom Element").child(
div()
.text_xs()
.text_color(cx.theme().muted_foreground)
.child("checked"),
)
})
.menu_element_with_icon(
IconName::Info,
Box::new(Info(0)),
|_, cx| {
h_flex().gap_1().child("Custom").child(
div()
.text_sm()
.text_color(cx.theme().muted_foreground)
.child("element"),
)
},
)
.separator()
.link("GPUI", "https://gpui.rs")
.link("Zed", "https://zed.dev")
})
},
))
.menu_with_disabled("Disabled Item", Box::new(Info(0)), true)
.separator()
.submenu("Links", window, cx, |menu, _, _| {
menu.link_with_icon(
"GitHub Repository",
IconName::GitHub,
"https://github.com/longbridge/gpui-component",
)
.separator()
.link("GPUI", "https://gpui.rs")
.link("Zed", "https://zed.dev")
})
}),
)
.child(self.message.clone()),
)
.child(
@ -216,6 +219,7 @@ impl Render for MenuStory {
.child(
section("Menu with scrollbar").child(
Button::new("popup-menu-11112")
.outline()
.label("Scrollable Menu")
.popup_menu_with_anchor(Corner::TopRight, move |this, _, _| {
let mut this = this

25
crates/story/src/modal_story.rs
View file

@ -244,17 +244,23 @@ impl Render for ModalStory {
})),
),
)
.child(section("Normal Modal").child(
Button::new("show-modal").label("Open Modal...").on_click(
cx.listener(|this, _, window, cx| this.show_modal(window, cx)),
.child(
section("Normal Modal").child(
Button::new("show-modal")
.outline()
.label("Open Modal")
.on_click(
cx.listener(|this, _, window, cx| this.show_modal(window, cx)),
),
),
))
)
.child(
section("Focus back test")
.max_w_md()
.child(TextInput::new(&self.input2))
.child(
Button::new("test-action")
.outline()
.label("Test Action")
.flex_shrink_0()
.on_click(|_, window, cx| {
@ -270,8 +276,8 @@ impl Render for ModalStory {
.child(
section("Confirm Modal").child(
Button::new("confirm-modal0")
.primary()
.label("Submit")
.outline()
.label("Open Confirm Modal")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| {
modal
@ -298,8 +304,8 @@ impl Render for ModalStory {
.child(
section("Confirm Modal with custom buttons").child(
Button::new("confirm-modal1")
.danger()
.label("Delete Item")
.outline()
.label("Custom Buttons")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| {
modal
@ -337,6 +343,7 @@ impl Render for ModalStory {
.child(
section("Alert Modal").child(
Button::new("alert-modal")
.outline()
.label("Alert")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| {
@ -357,6 +364,7 @@ impl Render for ModalStory {
.child(
section("Scrollable Modal").child(
Button::new("scrollable-modal")
.outline()
.label("Scrollable Modal")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| {
@ -376,6 +384,7 @@ impl Render for ModalStory {
.child(
section("Custom Modal style").child(
Button::new("custom-modal-style")
.outline()
.label("Custom Modal Style")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, cx| {

17
crates/story/src/notification_story.rs
View file

@ -64,6 +64,7 @@ impl Render for NotificationStory {
.child(
section("Simple Notification").child(
Button::new("show-notify-0")
.outline()
.label("Show Notification")
.on_click(cx.listener(|_, _, window, cx| {
window.push_notification("This is a notification.", cx)
@ -88,7 +89,7 @@ impl Render for NotificationStory {
)
.child(
Button::new("show-notify-error")
.danger()
.outline()
.label("Error")
.on_click(cx.listener(|_, _, window, cx| {
window.push_notification(
@ -133,6 +134,7 @@ impl Render for NotificationStory {
.child(
section("With title and action").child(
Button::new("show-notify-with-title")
.outline()
.label("Notification with Title")
.on_click(cx.listener(|_, _, window, cx| {
struct TestNotification;
@ -144,7 +146,7 @@ impl Render for NotificationStory {
.message("There was a problem with your request.")
.autohide(false)
.action(|_, cx| {
Button::new("try-again").label("Try again").on_click(
Button::new("try-again").primary().label("Retry").on_click(
cx.listener(|this, _, window, cx| {
println!("You have clicked the try again action.");
this.dismiss(window, cx);
@ -163,6 +165,7 @@ impl Render for NotificationStory {
.child(
section("Custom Notification").child(
Button::new("show-notify-custom")
.outline()
.label("Show Custom Notification")
.on_click(cx.listener(|_, _, window, cx| {
window.push_notification(
@ -184,12 +187,16 @@ impl Render for NotificationStory {
section("Manual Close Notification")
.child(
Button::new("manual-open-notify")
.outline()
.label("Show")
.on_click(cx.listener(|_, _, window, cx| {
window.push_notification(
Notification::new()
.id::<ManualOpenNotification>()
.message("You can close this notification by clicking the Close button.")
.message(
"You can close this notification by \
clicking the Close button.",
)
.autohide(false),
cx,
);
@ -197,8 +204,8 @@ impl Render for NotificationStory {
)
.child(
Button::new("manual-close-notify")
.danger()
.label("Close")
.outline()
.label("Dismiss All")
.on_click(cx.listener(|_, _, window, cx| {
window.remove_notification::<ManualOpenNotification>(cx);
})),

18
crates/story/src/popover_story.rs
View file

@ -176,7 +176,7 @@ impl Render for PopoverStory {
.child(
v_flex().gap_4().child(
Popover::new("info-top-left")
.trigger(Button::new("info-top-left").label("Top Left"))
.trigger(Button::new("info-top-left").outline().label("Top Left"))
.content(|window, cx| {
cx.new(|cx| {
PopoverContent::new(window, cx, |_, _| {
@ -203,7 +203,7 @@ impl Render for PopoverStory {
.child(
Popover::new("info-top-right")
.anchor(Corner::TopRight)
.trigger(Button::new("info-top-right").label("Top Right"))
.trigger(Button::new("info-top-right").outline().label("Top Right"))
.content(|window, cx| {
cx.new(|cx| {
PopoverContent::new(window, cx, |_, _| {
@ -234,14 +234,24 @@ impl Render for PopoverStory {
.child(
Popover::new("info-bottom-left")
.anchor(Corner::BottomLeft)
.trigger(Button::new("pop").label("Popup with Form").w(px(300.)))
.trigger(
Button::new("pop")
.outline()
.label("Popup with Form")
.w(px(300.)),
)
.content(move |_, _| form.clone()),
)
.child(
Popover::new("info-bottom-right")
.anchor(Corner::BottomRight)
.mouse_button(MouseButton::Right)
.trigger(Button::new("pop").label("Mouse Right Click").w(px(300.)))
.trigger(
Button::new("pop")
.outline()
.label("Mouse Right Click")
.w(px(300.)),
)
.content(|window, cx| {
cx.new(|cx| {
PopoverContent::new(window, cx, |_, cx| {

59
crates/story/src/radio_story.rs
View file

@ -4,7 +4,6 @@ use gpui::{
};
use gpui_component::{
h_flex,
radio::{Radio, RadioGroup},
v_flex, ActiveTheme,
};
@ -58,25 +57,23 @@ impl Render for RadioStory {
v_flex()
.gap_6()
.child(
section("Radio").max_w_md().child(
h_flex()
.w_full()
.gap_4()
.items_start()
.child(Radio::new("radio1").checked(self.radio_check1).on_click(
cx.listener(|this, v, _, _| {
section("Radio")
.max_w_md()
.child(
Radio::new("radio1")
.checked(self.radio_check1)
.on_click(cx.listener(|this, v, _, _| {
this.radio_check1 = *v;
}),
))
.child(
Radio::new("radio2")
.label("Radio")
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _, _| {
this.radio_check2 = *v;
})),
),
),
})),
)
.child(
Radio::new("radio2")
.label("Radio")
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _, _| {
this.radio_check2 = *v;
})),
),
)
.child(
section("Disabled")
@ -117,17 +114,19 @@ impl Render for RadioStory {
section("Radio Group Vertical (With container style)")
.max_w_md()
.child(
RadioGroup::vertical("radio_group_2")
.w(px(220.))
.p_2()
.border_1()
.border_color(cx.theme().border)
.rounded_md()
.disabled(true)
.child(Radio::new("one1").label("United States"))
.child(Radio::new("one2").label("Canada"))
.child(Radio::new("one3").label("Mexico"))
.selected_index(Some(1)),
v_flex().items_center().content_center().child(
RadioGroup::vertical("radio_group_2")
.w(px(220.))
.p_2()
.border_1()
.border_color(cx.theme().border)
.rounded_md()
.disabled(true)
.child(Radio::new("one1").label("United States"))
.child(Radio::new("one2").label("Canada"))
.child(Radio::new("one3").label("Mexico"))
.selected_index(Some(1)),
),
),
)
}

7
crates/story/src/table_story.rs
View file

@ -860,6 +860,7 @@ impl Render for TableStory {
.gap_2()
.child(
Button::new("size")
.outline()
.small()
.label(format!("size: {:?}", self.size))
.popup_menu(move |menu, _, _| {
@ -887,8 +888,9 @@ impl Render for TableStory {
)
.child(
Button::new("scroll-top")
.child("Scroll to Top")
.outline()
.small()
.child("Scroll to Top")
.on_click(cx.listener(|this, _, _, cx| {
this.table.update(cx, |table, cx| {
table.scroll_to_row(0, cx);
@ -897,8 +899,9 @@ impl Render for TableStory {
)
.child(
Button::new("scroll-bottom")
.child("Scroll to Bottom")
.outline()
.small()
.child("Scroll to Bottom")
.on_click(cx.listener(|this, _, _, cx| {
this.table.update(cx, |table, cx| {
table.scroll_to_row(table.delegate().rows_count(cx) - 1, cx);

2
crates/story/src/textarea_story.rs
View file

@ -158,6 +158,7 @@ impl Render for TextareaStory {
.gap_2()
.child(
Button::new("btn-insert-text")
.outline()
.xsmall()
.label("Insert Text")
.on_click(
@ -166,6 +167,7 @@ impl Render for TextareaStory {
)
.child(
Button::new("btn-replace-text")
.outline()
.xsmall()
.label("Replace Text")
.on_click(

56
crates/ui/src/button/button.rs
View file

@ -849,15 +849,57 @@ impl ButtonVariant {
fn selected(&self, outline: bool, cx: &mut App) -> ButtonVariantStyle {
let bg = match self {
ButtonVariant::Primary => cx.theme().primary_active,
ButtonVariant::Secondary | ButtonVariant::Ghost => cx.theme().secondary_active,
ButtonVariant::Danger => cx.theme().danger_active,
ButtonVariant::Warning => cx.theme().warning_active,
ButtonVariant::Success => cx.theme().success_active,
ButtonVariant::Info => cx.theme().info_active,
ButtonVariant::Primary => {
if outline {
cx.theme().primary
} else {
cx.theme().primary_active
}
}
ButtonVariant::Secondary | ButtonVariant::Ghost => {
if outline {
cx.theme().secondary
} else {
cx.theme().secondary_active
}
}
ButtonVariant::Danger => {
if outline {
cx.theme().danger
} else {
cx.theme().danger_active
}
}
ButtonVariant::Warning => {
if outline {
cx.theme().warning
} else {
cx.theme().warning_active
}
}
ButtonVariant::Success => {
if outline {
cx.theme().success
} else {
cx.theme().success_active
}
}
ButtonVariant::Info => {
if outline {
cx.theme().info
} else {
cx.theme().info_active
}
}
ButtonVariant::Link => cx.theme().transparent,
ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Custom(colors) => colors.active,
ButtonVariant::Custom(colors) => {
if outline {
colors.color
} else {
colors.active
}
}
};
let border = self.border_color(bg, outline, cx);

2
crates/ui/src/notification.rs
View file

@ -302,7 +302,7 @@ impl Render for Notification {
}),
)
.when_some(self.action_builder.clone(), |this, action_builder| {
this.child(action_builder(window, cx).small().outline().mr_3p5())
this.child(action_builder(window, cx).small().mr_3p5())
})
.when_some(self.on_click.clone(), |this, on_click| {
this.on_click(cx.listener(move |view, event, window, cx| {

10
crates/ui/src/theme.rs
View file

@ -307,10 +307,10 @@ impl ThemeColor {
scrollbar: neutral_50().opacity(0.5),
scrollbar_thumb: neutral_400().opacity(0.9),
scrollbar_thumb_hover: neutral_400(),
secondary: neutral_100().darken(0.05),
secondary: neutral_100(),
secondary_active: neutral_200(),
secondary_foreground: neutral_900(),
secondary_hover: neutral_100().darken(0.05).opacity(0.5),
secondary_hover: neutral_100().opacity(0.5),
selection: blue_200(),
sidebar: neutral_50(),
sidebar_accent: neutral_200(),
@ -406,10 +406,10 @@ impl ThemeColor {
scrollbar: neutral_900().opacity(0.5),
scrollbar_thumb: neutral_700().opacity(0.9),
scrollbar_thumb_hover: neutral_700(),
secondary: neutral_800(),
secondary_active: neutral_800().darken(0.2),
secondary: neutral_900(),
secondary_active: neutral_800(),
secondary_foreground: neutral_50(),
secondary_hover: neutral_800().lighten(0.1),
secondary_hover: neutral_900().lighten(0.1),
selection: blue_700(),
sidebar: neutral_950(),
sidebar_accent: neutral_800(),