diff --git a/crates/story/examples/alert.rs b/crates/story/examples/alert.rs index 32e63b89..9762039c 100644 --- a/crates/story/examples/alert.rs +++ b/crates/story/examples/alert.rs @@ -96,7 +96,7 @@ impl Render for Example { .title("Error!"), ) .child( - Alert::info("Custom info alert with icon.") + Alert::info("Custom icon with info alert.") .with_size(self.size) .icon(IconName::Bell), ) diff --git a/crates/story/src/button_story.rs b/crates/story/src/button_story.rs index da81cc5c..0dc88da6 100644 --- a/crates/story/src/button_story.rs +++ b/crates/story/src/button_story.rs @@ -6,8 +6,8 @@ use gpui::{ use gpui_component::{ button::{Button, ButtonCustomVariant, ButtonGroup, ButtonVariants as _, DropdownButton}, checkbox::Checkbox, - green_600, green_700, green_800, green_950, h_flex, v_flex, white, ActiveTheme, - Disableable as _, Icon, IconName, Selectable as _, Sizable as _, Theme, + h_flex, indigo, v_flex, white, ActiveTheme, Disableable as _, Icon, IconName, Selectable as _, + Sizable as _, Theme, }; use crate::section; @@ -74,9 +74,9 @@ impl Render for ButtonStory { let custom_variant = ButtonCustomVariant::new(cx) .color(if cx.theme().mode.is_dark() { - green_800() + indigo(800) } else { - green_600() + indigo(600) }) .foreground(if cx.theme().mode.is_dark() { white() @@ -84,19 +84,19 @@ impl Render for ButtonStory { white() }) .border(if cx.theme().mode.is_dark() { - green_800() + indigo(800) } else { - green_700() + indigo(600) }) .hover(if cx.theme().mode.is_dark() { - green_800() + indigo(900) } else { - green_600() + indigo(700) }) .active(if cx.theme().mode.is_dark() { - green_950() + indigo(950) } else { - green_700() + indigo(700) }); v_flex() @@ -191,6 +191,36 @@ impl Render for ButtonStory { .when(compact, |this| this.compact()) .on_click(Self::on_click), ) + .child( + Button::new("button-4-warning") + .warning() + .label("Warning Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) + .child( + Button::new("button-4-success") + .success() + .label("Success Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) + .child( + Button::new("button-5-info") + .info() + .label("Info Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) .child( Button::new("button-5-ghost") .ghost() @@ -342,7 +372,7 @@ impl Render for ButtonStory { .on_click(Self::on_click), ) .child( - Button::new("button-outline-4") + Button::new("button-outline-4-danger") .danger() .outline() .label("Danger Button") @@ -352,6 +382,39 @@ impl Render for ButtonStory { .when(compact, |this| this.compact()) .on_click(Self::on_click), ) + .child( + Button::new("button-outline-4-warning") + .warning() + .outline() + .label("Warning Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) + .child( + Button::new("button-outline-4-success") + .success() + .outline() + .label("Success Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) + .child( + Button::new("button-outline-5-info") + .info() + .outline() + .label("Info Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) .child( Button::new("button-outline-6-custom") .outline() diff --git a/crates/ui/src/alert.rs b/crates/ui/src/alert.rs index 4007e348..818c05c4 100644 --- a/crates/ui/src/alert.rs +++ b/crates/ui/src/alert.rs @@ -148,7 +148,7 @@ impl RenderOnce for Alert { .rounded(radius) .border_1() .border_color(color) - .bg(color.opacity(0.05)) + .bg(color.opacity(0.1)) .text_color(self.variant.fg(cx)) .px(padding_x) .py(padding_y) diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs index bf4bdda9..2c993cf8 100644 --- a/crates/ui/src/button/button.rs +++ b/crates/ui/src/button/button.rs @@ -46,6 +46,21 @@ pub trait ButtonVariants: Sized { self.with_variant(ButtonVariant::Danger) } + /// With the warning style for the Button. + fn warning(self) -> Self { + self.with_variant(ButtonVariant::Warning) + } + + /// With the success style for the Button. + fn success(self) -> Self { + self.with_variant(ButtonVariant::Success) + } + + /// With the info style for the Button. + fn info(self) -> Self { + self.with_variant(ButtonVariant::Info) + } + /// With the ghost style for the Button. fn ghost(self) -> Self { self.with_variant(ButtonVariant::Ghost) @@ -116,6 +131,9 @@ pub enum ButtonVariant { Primary, Secondary, Danger, + Info, + Success, + Warning, Ghost, Link, Text, @@ -482,6 +500,9 @@ impl ButtonVariant { ButtonVariant::Primary => cx.theme().primary, ButtonVariant::Secondary => cx.theme().secondary, ButtonVariant::Danger => cx.theme().danger, + ButtonVariant::Warning => cx.theme().warning, + ButtonVariant::Success => cx.theme().success, + ButtonVariant::Info => cx.theme().info, ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => { cx.theme().transparent } @@ -506,6 +527,27 @@ impl ButtonVariant { cx.theme().danger_foreground } } + ButtonVariant::Warning => { + if outline { + cx.theme().warning + } else { + cx.theme().warning_foreground + } + } + ButtonVariant::Success => { + if outline { + cx.theme().success + } else { + cx.theme().success_foreground + } + } + ButtonVariant::Info => { + if outline { + cx.theme().info + } else { + cx.theme().info_foreground + } + } ButtonVariant::Link => cx.theme().link, ButtonVariant::Text => cx.theme().foreground, ButtonVariant::Custom(colors) => { @@ -523,6 +565,9 @@ impl ButtonVariant { ButtonVariant::Primary => cx.theme().primary, ButtonVariant::Secondary => cx.theme().border, ButtonVariant::Danger => cx.theme().danger, + ButtonVariant::Info => cx.theme().info, + ButtonVariant::Warning => cx.theme().warning, + ButtonVariant::Success => cx.theme().success, ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => { cx.theme().transparent } @@ -578,6 +623,27 @@ impl ButtonVariant { cx.theme().danger_hover } } + ButtonVariant::Warning => { + if outline { + cx.theme().secondary_hover + } else { + cx.theme().warning_hover + } + } + ButtonVariant::Success => { + if outline { + cx.theme().secondary_hover + } else { + cx.theme().success_hover + } + } + ButtonVariant::Info => { + if outline { + cx.theme().secondary_hover + } else { + cx.theme().info_hover + } + } ButtonVariant::Ghost => { if cx.theme().mode.is_dark() { cx.theme().secondary.lighten(0.1).opacity(0.8) @@ -638,6 +704,27 @@ impl ButtonVariant { cx.theme().danger_active } } + ButtonVariant::Warning => { + if outline { + cx.theme().warning_active.opacity(0.1) + } else { + cx.theme().warning_active + } + } + ButtonVariant::Success => { + if outline { + cx.theme().success_active.opacity(0.1) + } else { + cx.theme().success_active + } + } + ButtonVariant::Info => { + if outline { + cx.theme().info_active.opacity(0.1) + } else { + cx.theme().info_active + } + } ButtonVariant::Link => cx.theme().transparent, ButtonVariant::Text => cx.theme().transparent, ButtonVariant::Custom(colors) => { @@ -671,6 +758,9 @@ impl ButtonVariant { 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::Link => cx.theme().transparent, ButtonVariant::Text => cx.theme().transparent, ButtonVariant::Custom(colors) => colors.active, @@ -701,6 +791,9 @@ impl ButtonVariant { } ButtonVariant::Primary => cx.theme().primary.opacity(0.15), ButtonVariant::Danger => cx.theme().danger.opacity(0.15), + ButtonVariant::Warning => cx.theme().warning.opacity(0.15), + ButtonVariant::Success => cx.theme().success.opacity(0.15), + ButtonVariant::Info => cx.theme().info.opacity(0.15), ButtonVariant::Secondary => cx.theme().secondary.opacity(1.5), ButtonVariant::Custom(style) => style.color.opacity(0.15), }; diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index d0940e02..f11e5776 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -342,10 +342,10 @@ impl ThemeColor { card: hsl(0.0, 0.0, 8.0), card_foreground: hsl(0.0, 0.0, 78.0), caret: hsl(0., 0., 78.), - danger: crate::red_900(), - danger_active: crate::red_900().darken(0.2), + danger: crate::red_800(), + danger_active: crate::red_800().darken(0.2), danger_foreground: crate::red_50(), - danger_hover: crate::red_900().opacity(0.9), + danger_hover: crate::red_800().opacity(0.9), description_list_label: hsl(240.0, 0., 13.0), description_list_label_foreground: hsl(0.0, 0.0, 78.0), drag_border: crate::blue_500(), @@ -393,10 +393,10 @@ impl ThemeColor { skeleton: hsla(223.0, 0.0, 98.0, 0.1), slider_bar: hsl(223.0, 0.0, 98.0), slider_thumb: hsl(0.0, 0.0, 8.0), - success: crate::green_900(), - success_active: crate::green_900().darken(0.2), + success: crate::green_800(), + success_active: crate::green_800().darken(0.2), success_foreground: crate::green_50(), - success_hover: crate::green_900().opacity(0.8), + success_hover: crate::green_800().opacity(0.8), tab: gpui::transparent_black(), tab_active: hsl(0.0, 0.0, 8.0), tab_active_foreground: hsl(0., 0., 78.), @@ -414,10 +414,10 @@ impl ThemeColor { tiles: hsl(0.0, 0.0, 5.0), title_bar: hsl(0., 0., 9.7), title_bar_border: hsl(240.0, 3.7, 15.9), - warning: crate::yellow_900(), - warning_active: crate::yellow_900().darken(0.2), + warning: crate::yellow_800(), + warning_active: crate::yellow_800().darken(0.2), warning_foreground: crate::yellow_50(), - warning_hover: crate::yellow_900().opacity(0.9), + warning_hover: crate::yellow_800().opacity(0.9), window_border: hsl(240.0, 3.7, 28.0), } }