From 1069469c465c95338cad9f4c855dfe67153d53fa Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Thu, 3 Jul 2025 19:23:40 +0800 Subject: [PATCH] theme: Update secondary color and fix toggle selected color. (#1039) image image image image --- crates/story/src/button_story.rs | 2 +- crates/story/src/color_picker_story.rs | 4 +- crates/story/src/description_list_story.rs | 3 +- crates/story/src/drawer_story.rs | 6 ++ crates/story/src/form_story.rs | 1 + crates/story/src/image_story.rs | 1 + crates/story/src/list_story.rs | 3 + crates/story/src/menu_story.rs | 104 +++++++++++---------- crates/story/src/modal_story.rs | 25 +++-- crates/story/src/notification_story.rs | 17 +++- crates/story/src/popover_story.rs | 18 +++- crates/story/src/radio_story.rs | 59 ++++++------ crates/story/src/table_story.rs | 7 +- crates/story/src/textarea_story.rs | 2 + crates/ui/src/button/button.rs | 56 +++++++++-- crates/ui/src/notification.rs | 2 +- crates/ui/src/theme.rs | 10 +- 17 files changed, 204 insertions(+), 116 deletions(-) diff --git a/crates/story/src/button_story.rs b/crates/story/src/button_story.rs index 528c7eaa..4363d94f 100644 --- a/crates/story/src/button_story.rs +++ b/crates/story/src/button_story.rs @@ -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") diff --git a/crates/story/src/color_picker_story.rs b/crates/story/src/color_picker_story.rs index 84dd134e..f3fb8a32 100644 --- a/crates/story/src/color_picker_story.rs +++ b/crates/story/src/color_picker_story.rs @@ -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(), diff --git a/crates/story/src/description_list_story.rs b/crates/story/src/description_list_story.rs index 9fa292e1..c55e16a7 100644 --- a/crates/story/src/description_list_story.rs +++ b/crates/story/src/description_list_story.rs @@ -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; diff --git a/crates/story/src/drawer_story.rs b/crates/story/src/drawer_story.rs index fe75669e..e2a00144 100644 --- a/crates/story/src/drawer_story.rs +++ b/crates/story/src/drawer_story.rs @@ -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| { diff --git a/crates/story/src/form_story.rs b/crates/story/src/form_story.rs index 41c38802..267af4db 100644 --- a/crates/story/src/form_story.rs +++ b/crates/story/src/form_story.rs @@ -123,6 +123,7 @@ impl Render for FormStory { ) .child( ButtonGroup::new("size") + .outline() .small() .child( Button::new("large") diff --git a/crates/story/src/image_story.rs b/crates/story/src/image_story.rs index 02351690..e09434ee 100644 --- a/crates/story/src/image_story.rs +++ b/crates/story/src/image_story.rs @@ -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; diff --git a/crates/story/src/list_story.rs b/crates/story/src/list_story.rs index b875a640..f2c717b6 100644 --- a/crates/story/src/list_story.rs +++ b/crates/story/src/list_story.rs @@ -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| { diff --git a/crates/story/src/menu_story.rs b/crates/story/src/menu_story.rs index 0fc576dd..d8451b75 100644 --- a/crates/story/src/menu_story.rs +++ b/crates/story/src/menu_story.rs @@ -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 diff --git a/crates/story/src/modal_story.rs b/crates/story/src/modal_story.rs index 04d73d4a..5d9057ed 100644 --- a/crates/story/src/modal_story.rs +++ b/crates/story/src/modal_story.rs @@ -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| { diff --git a/crates/story/src/notification_story.rs b/crates/story/src/notification_story.rs index 5a2fa8f5..ca21b1e4 100644 --- a/crates/story/src/notification_story.rs +++ b/crates/story/src/notification_story.rs @@ -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::() - .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::(cx); })), diff --git a/crates/story/src/popover_story.rs b/crates/story/src/popover_story.rs index 476130be..6cb8e796 100644 --- a/crates/story/src/popover_story.rs +++ b/crates/story/src/popover_story.rs @@ -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| { diff --git a/crates/story/src/radio_story.rs b/crates/story/src/radio_story.rs index 63fbbb53..6fe8e4ba 100644 --- a/crates/story/src/radio_story.rs +++ b/crates/story/src/radio_story.rs @@ -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)), + ), ), ) } diff --git a/crates/story/src/table_story.rs b/crates/story/src/table_story.rs index 6df0f734..6092e7a4 100644 --- a/crates/story/src/table_story.rs +++ b/crates/story/src/table_story.rs @@ -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); diff --git a/crates/story/src/textarea_story.rs b/crates/story/src/textarea_story.rs index b1f8cca5..5889920a 100644 --- a/crates/story/src/textarea_story.rs +++ b/crates/story/src/textarea_story.rs @@ -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( diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs index a3f84b90..d78ee3a4 100644 --- a/crates/ui/src/button/button.rs +++ b/crates/ui/src/button/button.rs @@ -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); diff --git a/crates/ui/src/notification.rs b/crates/ui/src/notification.rs index 92b3303e..c587a3cf 100644 --- a/crates/ui/src/notification.rs +++ b/crates/ui/src/notification.rs @@ -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| { diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index 613edb86..3a4df5e5 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -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(),