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( .child(
section("Button Group").child( section("Button Group").child(
ButtonGroup::new("button-group") ButtonGroup::new("button-group")
.small() .outline()
.disabled(disabled) .disabled(disabled)
.child( .child(
Button::new("button-one") Button::new("button-one")

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

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

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

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

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

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

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

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

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

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

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

@ -371,6 +371,7 @@ impl Render for ListStory {
.flex_wrap() .flex_wrap()
.child( .child(
Button::new("scroll-top") Button::new("scroll-top")
.outline()
.child("Scroll to Top") .child("Scroll to Top")
.small() .small()
.on_click(cx.listener(|this, _, window, cx| { .on_click(cx.listener(|this, _, window, cx| {
@ -381,6 +382,7 @@ impl Render for ListStory {
) )
.child( .child(
Button::new("scroll-bottom") Button::new("scroll-bottom")
.outline()
.child("Scroll to Bottom") .child("Scroll to Bottom")
.small() .small()
.on_click(cx.listener(|this, _, window, cx| { .on_click(cx.listener(|this, _, window, cx| {
@ -395,6 +397,7 @@ impl Render for ListStory {
) )
.child( .child(
Button::new("scroll-to-selected") Button::new("scroll-to-selected")
.outline()
.child("Scroll to Selected") .child("Scroll to Selected")
.small() .small()
.on_click(cx.listener(|this, _, window, cx| { .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() .gap_6()
.child( .child(
section("Popup Menu") section("Popup Menu")
.child(Button::new("popup-menu-1").label("Edit").popup_menu( .child(
move |this, window, cx| { Button::new("popup-menu-1")
this.link("About", "https://github.com/longbridge/gpui-component") .outline()
.separator() .label("Edit")
.menu("Copy", Box::new(Copy)) .popup_menu(move |this, window, cx| {
.menu("Cut", Box::new(Cut)) this.link("About", "https://github.com/longbridge/gpui-component")
.menu("Paste", Box::new(Paste)) .separator()
.separator() .menu("Copy", Box::new(Copy))
.menu_with_check("Toggle Check", checked, Box::new(ToggleCheck)) .menu("Cut", Box::new(Cut))
.separator() .menu("Paste", Box::new(Paste))
.menu_with_icon("Search", IconName::Search, Box::new(SearchAll)) .separator()
.separator() .menu_with_check("Toggle Check", checked, Box::new(ToggleCheck))
.menu_element(Box::new(Info(0)), |_, cx| { .separator()
v_flex().child("Custom Element").child( .menu_with_icon("Search", IconName::Search, Box::new(SearchAll))
div() .separator()
.text_xs() .menu_element(Box::new(Info(0)), |_, cx| {
.text_color(cx.theme().muted_foreground) v_flex().child("Custom Element").child(
.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(
div() div()
.text_sm() .text_xs()
.text_color(cx.theme().muted_foreground) .text_color(cx.theme().muted_foreground)
.child("element"), .child("THis is sub-title"),
) )
}, })
) .menu_element_with_check(checked, Box::new(Info(0)), |_, cx| {
.separator() h_flex().gap_1().child("Custom Element").child(
.menu_with_disabled("Disabled Item", Box::new(Info(0)), true) div()
.separator() .text_xs()
.submenu("Links", window, cx, |menu, _, _| { .text_color(cx.theme().muted_foreground)
menu.link_with_icon( .child("checked"),
"GitHub Repository", )
IconName::GitHub, })
"https://github.com/longbridge/gpui-component", .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() .separator()
.link("GPUI", "https://gpui.rs") .menu_with_disabled("Disabled Item", Box::new(Info(0)), true)
.link("Zed", "https://zed.dev") .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(self.message.clone()),
) )
.child( .child(
@ -216,6 +219,7 @@ impl Render for MenuStory {
.child( .child(
section("Menu with scrollbar").child( section("Menu with scrollbar").child(
Button::new("popup-menu-11112") Button::new("popup-menu-11112")
.outline()
.label("Scrollable Menu") .label("Scrollable Menu")
.popup_menu_with_anchor(Corner::TopRight, move |this, _, _| { .popup_menu_with_anchor(Corner::TopRight, move |this, _, _| {
let mut this = 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( .child(
Button::new("show-modal").label("Open Modal...").on_click( section("Normal Modal").child(
cx.listener(|this, _, window, cx| this.show_modal(window, cx)), Button::new("show-modal")
.outline()
.label("Open Modal")
.on_click(
cx.listener(|this, _, window, cx| this.show_modal(window, cx)),
),
), ),
)) )
.child( .child(
section("Focus back test") section("Focus back test")
.max_w_md() .max_w_md()
.child(TextInput::new(&self.input2)) .child(TextInput::new(&self.input2))
.child( .child(
Button::new("test-action") Button::new("test-action")
.outline()
.label("Test Action") .label("Test Action")
.flex_shrink_0() .flex_shrink_0()
.on_click(|_, window, cx| { .on_click(|_, window, cx| {
@ -270,8 +276,8 @@ impl Render for ModalStory {
.child( .child(
section("Confirm Modal").child( section("Confirm Modal").child(
Button::new("confirm-modal0") Button::new("confirm-modal0")
.primary() .outline()
.label("Submit") .label("Open Confirm Modal")
.on_click(cx.listener(move |_, _, window, cx| { .on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| { window.open_modal(cx, move |modal, _, _| {
modal modal
@ -298,8 +304,8 @@ impl Render for ModalStory {
.child( .child(
section("Confirm Modal with custom buttons").child( section("Confirm Modal with custom buttons").child(
Button::new("confirm-modal1") Button::new("confirm-modal1")
.danger() .outline()
.label("Delete Item") .label("Custom Buttons")
.on_click(cx.listener(move |_, _, window, cx| { .on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| { window.open_modal(cx, move |modal, _, _| {
modal modal
@ -337,6 +343,7 @@ impl Render for ModalStory {
.child( .child(
section("Alert Modal").child( section("Alert Modal").child(
Button::new("alert-modal") Button::new("alert-modal")
.outline()
.label("Alert") .label("Alert")
.on_click(cx.listener(move |_, _, window, cx| { .on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| { window.open_modal(cx, move |modal, _, _| {
@ -357,6 +364,7 @@ impl Render for ModalStory {
.child( .child(
section("Scrollable Modal").child( section("Scrollable Modal").child(
Button::new("scrollable-modal") Button::new("scrollable-modal")
.outline()
.label("Scrollable Modal") .label("Scrollable Modal")
.on_click(cx.listener(move |_, _, window, cx| { .on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, _| { window.open_modal(cx, move |modal, _, _| {
@ -376,6 +384,7 @@ impl Render for ModalStory {
.child( .child(
section("Custom Modal style").child( section("Custom Modal style").child(
Button::new("custom-modal-style") Button::new("custom-modal-style")
.outline()
.label("Custom Modal Style") .label("Custom Modal Style")
.on_click(cx.listener(move |_, _, window, cx| { .on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, 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( .child(
section("Simple Notification").child( section("Simple Notification").child(
Button::new("show-notify-0") Button::new("show-notify-0")
.outline()
.label("Show Notification") .label("Show Notification")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
window.push_notification("This is a notification.", cx) window.push_notification("This is a notification.", cx)
@ -88,7 +89,7 @@ impl Render for NotificationStory {
) )
.child( .child(
Button::new("show-notify-error") Button::new("show-notify-error")
.danger() .outline()
.label("Error") .label("Error")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
window.push_notification( window.push_notification(
@ -133,6 +134,7 @@ impl Render for NotificationStory {
.child( .child(
section("With title and action").child( section("With title and action").child(
Button::new("show-notify-with-title") Button::new("show-notify-with-title")
.outline()
.label("Notification with Title") .label("Notification with Title")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
struct TestNotification; struct TestNotification;
@ -144,7 +146,7 @@ impl Render for NotificationStory {
.message("There was a problem with your request.") .message("There was a problem with your request.")
.autohide(false) .autohide(false)
.action(|_, cx| { .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| { cx.listener(|this, _, window, cx| {
println!("You have clicked the try again action."); println!("You have clicked the try again action.");
this.dismiss(window, cx); this.dismiss(window, cx);
@ -163,6 +165,7 @@ impl Render for NotificationStory {
.child( .child(
section("Custom Notification").child( section("Custom Notification").child(
Button::new("show-notify-custom") Button::new("show-notify-custom")
.outline()
.label("Show Custom Notification") .label("Show Custom Notification")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
window.push_notification( window.push_notification(
@ -184,12 +187,16 @@ impl Render for NotificationStory {
section("Manual Close Notification") section("Manual Close Notification")
.child( .child(
Button::new("manual-open-notify") Button::new("manual-open-notify")
.outline()
.label("Show") .label("Show")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
window.push_notification( window.push_notification(
Notification::new() Notification::new()
.id::<ManualOpenNotification>() .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), .autohide(false),
cx, cx,
); );
@ -197,8 +204,8 @@ impl Render for NotificationStory {
) )
.child( .child(
Button::new("manual-close-notify") Button::new("manual-close-notify")
.danger() .outline()
.label("Close") .label("Dismiss All")
.on_click(cx.listener(|_, _, window, cx| { .on_click(cx.listener(|_, _, window, cx| {
window.remove_notification::<ManualOpenNotification>(cx); window.remove_notification::<ManualOpenNotification>(cx);
})), })),

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

@ -176,7 +176,7 @@ impl Render for PopoverStory {
.child( .child(
v_flex().gap_4().child( v_flex().gap_4().child(
Popover::new("info-top-left") 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| { .content(|window, cx| {
cx.new(|cx| { cx.new(|cx| {
PopoverContent::new(window, cx, |_, _| { PopoverContent::new(window, cx, |_, _| {
@ -203,7 +203,7 @@ impl Render for PopoverStory {
.child( .child(
Popover::new("info-top-right") Popover::new("info-top-right")
.anchor(Corner::TopRight) .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| { .content(|window, cx| {
cx.new(|cx| { cx.new(|cx| {
PopoverContent::new(window, cx, |_, _| { PopoverContent::new(window, cx, |_, _| {
@ -234,14 +234,24 @@ impl Render for PopoverStory {
.child( .child(
Popover::new("info-bottom-left") Popover::new("info-bottom-left")
.anchor(Corner::BottomLeft) .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()), .content(move |_, _| form.clone()),
) )
.child( .child(
Popover::new("info-bottom-right") Popover::new("info-bottom-right")
.anchor(Corner::BottomRight) .anchor(Corner::BottomRight)
.mouse_button(MouseButton::Right) .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| { .content(|window, cx| {
cx.new(|cx| { cx.new(|cx| {
PopoverContent::new(window, cx, |_, cx| { PopoverContent::new(window, cx, |_, cx| {

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

@ -4,7 +4,6 @@ use gpui::{
}; };
use gpui_component::{ use gpui_component::{
h_flex,
radio::{Radio, RadioGroup}, radio::{Radio, RadioGroup},
v_flex, ActiveTheme, v_flex, ActiveTheme,
}; };
@ -58,25 +57,23 @@ impl Render for RadioStory {
v_flex() v_flex()
.gap_6() .gap_6()
.child( .child(
section("Radio").max_w_md().child( section("Radio")
h_flex() .max_w_md()
.w_full() .child(
.gap_4() Radio::new("radio1")
.items_start() .checked(self.radio_check1)
.child(Radio::new("radio1").checked(self.radio_check1).on_click( .on_click(cx.listener(|this, v, _, _| {
cx.listener(|this, v, _, _| {
this.radio_check1 = *v; this.radio_check1 = *v;
}), })),
)) )
.child( .child(
Radio::new("radio2") Radio::new("radio2")
.label("Radio") .label("Radio")
.checked(self.radio_check2) .checked(self.radio_check2)
.on_click(cx.listener(|this, v, _, _| { .on_click(cx.listener(|this, v, _, _| {
this.radio_check2 = *v; this.radio_check2 = *v;
})), })),
), ),
),
) )
.child( .child(
section("Disabled") section("Disabled")
@ -117,17 +114,19 @@ impl Render for RadioStory {
section("Radio Group Vertical (With container style)") section("Radio Group Vertical (With container style)")
.max_w_md() .max_w_md()
.child( .child(
RadioGroup::vertical("radio_group_2") v_flex().items_center().content_center().child(
.w(px(220.)) RadioGroup::vertical("radio_group_2")
.p_2() .w(px(220.))
.border_1() .p_2()
.border_color(cx.theme().border) .border_1()
.rounded_md() .border_color(cx.theme().border)
.disabled(true) .rounded_md()
.child(Radio::new("one1").label("United States")) .disabled(true)
.child(Radio::new("one2").label("Canada")) .child(Radio::new("one1").label("United States"))
.child(Radio::new("one3").label("Mexico")) .child(Radio::new("one2").label("Canada"))
.selected_index(Some(1)), .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() .gap_2()
.child( .child(
Button::new("size") Button::new("size")
.outline()
.small() .small()
.label(format!("size: {:?}", self.size)) .label(format!("size: {:?}", self.size))
.popup_menu(move |menu, _, _| { .popup_menu(move |menu, _, _| {
@ -887,8 +888,9 @@ impl Render for TableStory {
) )
.child( .child(
Button::new("scroll-top") Button::new("scroll-top")
.child("Scroll to Top") .outline()
.small() .small()
.child("Scroll to Top")
.on_click(cx.listener(|this, _, _, cx| { .on_click(cx.listener(|this, _, _, cx| {
this.table.update(cx, |table, cx| { this.table.update(cx, |table, cx| {
table.scroll_to_row(0, cx); table.scroll_to_row(0, cx);
@ -897,8 +899,9 @@ impl Render for TableStory {
) )
.child( .child(
Button::new("scroll-bottom") Button::new("scroll-bottom")
.child("Scroll to Bottom") .outline()
.small() .small()
.child("Scroll to Bottom")
.on_click(cx.listener(|this, _, _, cx| { .on_click(cx.listener(|this, _, _, cx| {
this.table.update(cx, |table, cx| { this.table.update(cx, |table, cx| {
table.scroll_to_row(table.delegate().rows_count(cx) - 1, 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() .gap_2()
.child( .child(
Button::new("btn-insert-text") Button::new("btn-insert-text")
.outline()
.xsmall() .xsmall()
.label("Insert Text") .label("Insert Text")
.on_click( .on_click(
@ -166,6 +167,7 @@ impl Render for TextareaStory {
) )
.child( .child(
Button::new("btn-replace-text") Button::new("btn-replace-text")
.outline()
.xsmall() .xsmall()
.label("Replace Text") .label("Replace Text")
.on_click( .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 { fn selected(&self, outline: bool, cx: &mut App) -> ButtonVariantStyle {
let bg = match self { let bg = match self {
ButtonVariant::Primary => cx.theme().primary_active, ButtonVariant::Primary => {
ButtonVariant::Secondary | ButtonVariant::Ghost => cx.theme().secondary_active, if outline {
ButtonVariant::Danger => cx.theme().danger_active, cx.theme().primary
ButtonVariant::Warning => cx.theme().warning_active, } else {
ButtonVariant::Success => cx.theme().success_active, cx.theme().primary_active
ButtonVariant::Info => cx.theme().info_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::Link => cx.theme().transparent,
ButtonVariant::Text => 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); 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| { .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| { .when_some(self.on_click.clone(), |this, on_click| {
this.on_click(cx.listener(move |view, event, window, cx| { 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: neutral_50().opacity(0.5),
scrollbar_thumb: neutral_400().opacity(0.9), scrollbar_thumb: neutral_400().opacity(0.9),
scrollbar_thumb_hover: neutral_400(), scrollbar_thumb_hover: neutral_400(),
secondary: neutral_100().darken(0.05), secondary: neutral_100(),
secondary_active: neutral_200(), secondary_active: neutral_200(),
secondary_foreground: neutral_900(), secondary_foreground: neutral_900(),
secondary_hover: neutral_100().darken(0.05).opacity(0.5), secondary_hover: neutral_100().opacity(0.5),
selection: blue_200(), selection: blue_200(),
sidebar: neutral_50(), sidebar: neutral_50(),
sidebar_accent: neutral_200(), sidebar_accent: neutral_200(),
@ -406,10 +406,10 @@ impl ThemeColor {
scrollbar: neutral_900().opacity(0.5), scrollbar: neutral_900().opacity(0.5),
scrollbar_thumb: neutral_700().opacity(0.9), scrollbar_thumb: neutral_700().opacity(0.9),
scrollbar_thumb_hover: neutral_700(), scrollbar_thumb_hover: neutral_700(),
secondary: neutral_800(), secondary: neutral_900(),
secondary_active: neutral_800().darken(0.2), secondary_active: neutral_800(),
secondary_foreground: neutral_50(), secondary_foreground: neutral_50(),
secondary_hover: neutral_800().lighten(0.1), secondary_hover: neutral_900().lighten(0.1),
selection: blue_700(), selection: blue_700(),
sidebar: neutral_950(), sidebar: neutral_950(),
sidebar_accent: neutral_800(), sidebar_accent: neutral_800(),