From c8481bee190707d1e2083d551989be0e78222d50 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Wed, 25 Jun 2025 16:40:27 +0800 Subject: [PATCH] theme: Update theme details to match Shadcn. (#1009) ## Light image image image image image image image image ## Dark image image image image image image image --- crates/story/src/scrollable_story.rs | 7 +- crates/story/src/tag_story.rs | 4 +- crates/ui/src/button/button.rs | 64 ++++- crates/ui/src/button/toggle.rs | 4 +- crates/ui/src/checkbox.rs | 4 +- crates/ui/src/color_picker.rs | 4 +- crates/ui/src/dropdown.rs | 2 +- crates/ui/src/input/hover_popover.rs | 4 +- crates/ui/src/input/otp_input.rs | 4 +- crates/ui/src/input/text_input.rs | 2 +- crates/ui/src/radio.rs | 6 +- crates/ui/src/sidebar/menu.rs | 2 +- crates/ui/src/styled.rs | 16 +- crates/ui/src/{tab.rs => tab/mod.rs} | 0 crates/ui/src/tab/tab.rs | 6 +- crates/ui/src/theme.rs | 382 +++++++++++++-------------- crates/ui/src/time/date_picker.rs | 2 +- 17 files changed, 283 insertions(+), 230 deletions(-) rename crates/ui/src/{tab.rs => tab/mod.rs} (100%) diff --git a/crates/story/src/scrollable_story.rs b/crates/story/src/scrollable_story.rs index b5c333aa..e21fc6de 100644 --- a/crates/story/src/scrollable_story.rs +++ b/crates/story/src/scrollable_story.rs @@ -7,8 +7,9 @@ use gpui::{ use gpui_component::{ button::{Button, ButtonGroup}, divider::Divider, - gray_100, gray_800, h_flex, + h_flex, label::Label, + neutral_100, neutral_800, scroll::{Scrollbar, ScrollbarAxis, ScrollbarState}, v_flex, v_virtual_list, ActiveTheme as _, Selectable, StyledExt as _, }; @@ -238,9 +239,9 @@ impl Render for ScrollableStory { .bg( if cx.theme().mode.is_dark() { - gray_800() + neutral_800() } else { - gray_100() + neutral_100() }, ) .child(if i == 0 { diff --git a/crates/story/src/tag_story.rs b/crates/story/src/tag_story.rs index a9fc5806..564e2c44 100644 --- a/crates/story/src/tag_story.rs +++ b/crates/story/src/tag_story.rs @@ -3,7 +3,7 @@ use gpui::{ Window, }; -use gpui_component::{h_flex, indigo_500, tag::Tag, v_flex, ColorName, Sizable}; +use gpui_component::{h_flex, indigo_50, indigo_500, tag::Tag, v_flex, ColorName, Sizable}; use crate::section; @@ -56,7 +56,7 @@ impl Render for TagStory { .child(Tag::warning().child("Warning")) .child(Tag::info().child("Info")) .child( - Tag::custom(indigo_500(), indigo_500(), indigo_500()).child("Custom"), + Tag::custom(indigo_500(), indigo_50(), indigo_500()).child("Custom"), ), ), ) diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs index 7169a63a..b1b85a76 100644 --- a/crates/ui/src/button/button.rs +++ b/crates/ui/src/button/button.rs @@ -400,7 +400,7 @@ impl RenderOnce for Button { .when(self.variant.is_link(), |this| this.cursor_pointer()) .overflow_hidden() .when(cx.theme().shadow && normal_style.shadow, |this| { - this.shadow_sm() + this.shadow_xs() }) .when(!style.no_padding(), |this| { if self.label.is_none() && self.children.is_empty() { @@ -614,14 +614,50 @@ impl ButtonVariant { } } - fn border_color(&self, _outline: bool, cx: &mut App) -> Hsla { + fn border_color(&self, bg: Hsla, outline: bool, cx: &mut App) -> Hsla { match self { - 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::Secondary => { + if outline { + cx.theme().border + } else { + bg + } + } + ButtonVariant::Primary => { + if outline { + cx.theme().primary + } else { + bg + } + } + ButtonVariant::Danger => { + if outline { + cx.theme().danger + } else { + bg + } + } + ButtonVariant::Info => { + if outline { + cx.theme().info + } else { + bg + } + } + ButtonVariant::Warning => { + if outline { + cx.theme().warning + } else { + bg + } + } + ButtonVariant::Success => { + if outline { + cx.theme().success + } else { + bg + } + } ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => { cx.theme().transparent } @@ -636,9 +672,9 @@ impl ButtonVariant { } } - fn shadow(&self, _outline: bool, _: &App) -> bool { + fn shadow(&self, outline: bool, _: &App) -> bool { match self { - ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => true, + ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => outline, ButtonVariant::Custom(c) => c.shadow, _ => false, } @@ -646,7 +682,7 @@ impl ButtonVariant { fn normal(&self, outline: bool, cx: &mut App) -> ButtonVariantStyle { let bg = self.bg_color(outline, cx); - let border = self.border_color(outline, cx); + let border = self.border_color(bg, outline, cx); let fg = self.text_color(outline, cx); let underline = self.underline(cx); let shadow = self.shadow(outline, cx); @@ -716,7 +752,7 @@ impl ButtonVariant { } }; - let border = self.border_color(outline, cx); + let border = self.border_color(bg, outline, cx); let fg = match self { ButtonVariant::Link => cx.theme().link_hover, _ => self.text_color(outline, cx), @@ -789,7 +825,7 @@ impl ButtonVariant { } } }; - let border = self.border_color(outline, cx); + let border = self.border_color(bg, outline, cx); let fg = match self { ButtonVariant::Link => cx.theme().link_active, ButtonVariant::Text => cx.theme().foreground.opacity(0.7), @@ -820,7 +856,7 @@ impl ButtonVariant { ButtonVariant::Custom(colors) => colors.active, }; - let border = self.border_color(outline, cx); + let border = self.border_color(bg, outline, cx); let fg = match self { ButtonVariant::Link => cx.theme().link_active, ButtonVariant::Text => cx.theme().foreground.opacity(0.7), diff --git a/crates/ui/src/button/toggle.rs b/crates/ui/src/button/toggle.rs index c268d645..9db6b828 100644 --- a/crates/ui/src/button/toggle.rs +++ b/crates/ui/src/button/toggle.rs @@ -7,7 +7,7 @@ use gpui::{ }; use smallvec::{smallvec, SmallVec}; -use crate::{h_flex, ActiveTheme, Disableable, Icon, Sizable, Size, StyledExt}; +use crate::{h_flex, ActiveTheme, Disableable, Icon, Sizable, Size, StyleSized as _, StyledExt}; #[derive(Default, Copy, Debug, Clone, PartialEq, Eq, Hash)] pub enum ToggleVariant { @@ -132,7 +132,7 @@ impl RenderOnce for Toggle { this.border_1() .border_color(cx.theme().border) .bg(cx.theme().background) - .when(cx.theme().shadow, |this| this.shadow_sm()) + .when(cx.theme().shadow, |this| this.shadow_xs()) }) .when(hoverable, |this| { this.hover(|this| { diff --git a/crates/ui/src/checkbox.rs b/crates/ui/src/checkbox.rs index a6c70c35..50a7f3bd 100644 --- a/crates/ui/src/checkbox.rs +++ b/crates/ui/src/checkbox.rs @@ -1,6 +1,6 @@ use crate::{ text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable, Sizable, Size, - StyledExt as _, + StyleSized as _, StyledExt as _, }; use gpui::{ div, prelude::FluentBuilder as _, px, relative, rems, svg, AnyElement, App, Div, ElementId, @@ -150,7 +150,7 @@ impl RenderOnce for Checkbox { .border_1() .border_color(color) .rounded(radius) - .when(cx.theme().shadow && !self.disabled, |this| this.shadow_sm()) + .when(cx.theme().shadow && !self.disabled, |this| this.shadow_xs()) .map(|this| match self.checked { false => this.bg(cx.theme().background), _ => this.bg(color), diff --git a/crates/ui/src/color_picker.rs b/crates/ui/src/color_picker.rs index 2ae87e71..e536dfa5 100644 --- a/crates/ui/src/color_picker.rs +++ b/crates/ui/src/color_picker.rs @@ -265,7 +265,7 @@ impl ColorPicker { this.hover(|this| { this.border_color(color.darken(0.3)) .bg(color.lighten(0.1)) - .shadow_sm() + .shadow_xs() }) .active(|this| this.border_color(color.darken(0.5)).bg(color.darken(0.2))) .on_mouse_move(window.listener_for(&state, move |state, _, _, cx| { @@ -396,7 +396,7 @@ impl RenderOnce for ColorPicker { .border_1() .border_color(cx.theme().input) .rounded(cx.theme().radius) - .shadow_sm() + .shadow_xs() .overflow_hidden() .size_with(self.size) .when_some(state.value, |this, value| { diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs index 18adb5c6..f93d0f5d 100644 --- a/crates/ui/src/dropdown.rs +++ b/crates/ui/src/dropdown.rs @@ -718,7 +718,7 @@ where .border_1() .border_color(cx.theme().input) .rounded(cx.theme().radius) - .when(cx.theme().shadow, |this| this.shadow_sm()) + .when(cx.theme().shadow, |this| this.shadow_xs()) .map(|this| if self.disabled { this } else { this }) .overflow_hidden() .input_text_size(self.size) diff --git a/crates/ui/src/input/hover_popover.rs b/crates/ui/src/input/hover_popover.rs index 363005be..66cdf0ab 100644 --- a/crates/ui/src/input/hover_popover.rs +++ b/crates/ui/src/input/hover_popover.rs @@ -9,7 +9,7 @@ use crate::{ highlighter::LanguageRegistry, input::{InputState, Marker}, text::TextView, - ActiveTheme as _, + ActiveTheme as _, StyleSized as _, }; pub struct DiagnosticPopover { @@ -112,7 +112,7 @@ impl Render for DiagnosticPopover { .border_1() .border_color(border) .rounded(cx.theme().radius) - .shadow_sm() + .shadow_xs() .child(TextView::markdown("message", message)) .child( canvas( diff --git a/crates/ui/src/input/otp_input.rs b/crates/ui/src/input/otp_input.rs index 057534e7..989494be 100644 --- a/crates/ui/src/input/otp_input.rs +++ b/crates/ui/src/input/otp_input.rs @@ -6,7 +6,7 @@ use gpui::{ }; use super::{blink_cursor::BlinkCursor, InputEvent}; -use crate::{h_flex, v_flex, ActiveTheme, Icon, IconName, Sizable, Size}; +use crate::{h_flex, v_flex, ActiveTheme, Icon, IconName, Sizable, Size, StyleSized as _}; pub struct OtpState { focus_handle: FocusHandle, @@ -244,7 +244,7 @@ impl RenderOnce for OtpInput { .border_color(cx.theme().input) .bg(cx.theme().background) .when(is_input_focused, |this| this.border_color(cx.theme().ring)) - .when(cx.theme().shadow, |this| this.shadow_sm()) + .when(cx.theme().shadow, |this| this.shadow_xs()) .items_center() .justify_center() .rounded(cx.theme().radius) diff --git a/crates/ui/src/input/text_input.rs b/crates/ui/src/input/text_input.rs index 5406ff25..22e92236 100644 --- a/crates/ui/src/input/text_input.rs +++ b/crates/ui/src/input/text_input.rs @@ -259,7 +259,7 @@ impl RenderOnce for TextInput { .when(self.bordered, |this| { this.border_color(cx.theme().input) .border_1() - .when(cx.theme().shadow, |this| this.shadow_sm()) + .when(cx.theme().shadow, |this| this.shadow_xs()) .when(focused && self.focus_bordered, |this| { this.focused_border(cx) }) diff --git a/crates/ui/src/radio.rs b/crates/ui/src/radio.rs index 421f74ea..3e219e5e 100644 --- a/crates/ui/src/radio.rs +++ b/crates/ui/src/radio.rs @@ -1,6 +1,8 @@ use std::rc::Rc; -use crate::{h_flex, text::Text, v_flex, ActiveTheme, AxisExt, IconName, StyledExt}; +use crate::{ + h_flex, text::Text, v_flex, ActiveTheme, AxisExt, IconName, StyleSized as _, StyledExt, +}; use gpui::{ div, prelude::FluentBuilder, relative, svg, AnyElement, App, Axis, Div, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, @@ -106,7 +108,7 @@ impl RenderOnce for Radio { .rounded_full() .border_1() .border_color(border_color) - .when(cx.theme().shadow && !self.disabled, |this| this.shadow_sm()) + .when(cx.theme().shadow && !self.disabled, |this| this.shadow_xs()) .map(|this| match self.checked { false => this.bg(cx.theme().background), _ => this.bg(bg), diff --git a/crates/ui/src/sidebar/menu.rs b/crates/ui/src/sidebar/menu.rs index b25ca1b7..81a81e55 100644 --- a/crates/ui/src/sidebar/menu.rs +++ b/crates/ui/src/sidebar/menu.rs @@ -165,7 +165,7 @@ impl RenderOnce for SidebarMenuItem { return this; } - this.bg(cx.theme().accent) + this.bg(cx.theme().sidebar_accent.opacity(0.8)) .text_color(cx.theme().sidebar_accent_foreground) }) .when(is_active && !is_submenu, |this| { diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs index 4ff99a52..94ccc4e4 100644 --- a/crates/ui/src/styled.rs +++ b/crates/ui/src/styled.rs @@ -5,8 +5,8 @@ use crate::{ ActiveTheme, }; use gpui::{ - div, px, App, Axis, DefiniteLength, Div, Edges, Element, ElementId, FocusHandle, Pixels, - Refineable, StyleRefinement, Styled, Window, + div, hsla, point, px, App, Axis, BoxShadow, DefiniteLength, Div, Edges, Element, ElementId, + FocusHandle, Pixels, Refineable, StyleRefinement, Styled, Window, }; use serde::{Deserialize, Serialize}; @@ -358,6 +358,7 @@ pub trait Sizable: Sized { #[allow(unused)] pub trait StyleSized { + fn shadow_xs(self) -> Self; fn input_text_size(self, size: Size) -> Self; fn input_size(self, size: Size) -> Self; fn input_pl(self, size: Size) -> Self; @@ -479,6 +480,17 @@ impl StyleSized for T { _ => self.text_base(), } } + + /// TODO: Remove this after PR is merged + /// https://github.com/zed-industries/zed/pull/33361 + fn shadow_xs(self) -> Self { + self.shadow(vec![BoxShadow { + color: hsla(0., 0., 0., 0.05), + offset: point(px(0.), px(1.)), + blur_radius: px(2.), + spread_radius: px(0.), + }]) + } } pub trait AxisExt { diff --git a/crates/ui/src/tab.rs b/crates/ui/src/tab/mod.rs similarity index 100% rename from crates/ui/src/tab.rs rename to crates/ui/src/tab/mod.rs diff --git a/crates/ui/src/tab/tab.rs b/crates/ui/src/tab/tab.rs index 03336625..dedfd82d 100644 --- a/crates/ui/src/tab/tab.rs +++ b/crates/ui/src/tab/tab.rs @@ -1,6 +1,8 @@ use std::sync::Arc; -use crate::{h_flex, ActiveTheme, Icon, IconName, Selectable, Sizable, Size, StyledExt}; +use crate::{ + h_flex, ActiveTheme, Icon, IconName, Selectable, Sizable, Size, StyleSized as _, StyledExt, +}; use gpui::prelude::FluentBuilder as _; use gpui::{ div, px, AnyElement, App, ClickEvent, Div, Edges, ElementId, Hsla, InteractiveElement, @@ -642,7 +644,7 @@ impl RenderOnce for Tab { }) .bg(tab_style.inner_bg) .rounded(tab_style.inner_radius) - .when(tab_style.shadow, |this| this.shadow_sm()) + .when(tab_style.shadow, |this| this.shadow_xs()) .hover(|this| { this.bg(hover_style.inner_bg) .rounded(hover_style.inner_radius) diff --git a/crates/ui/src/theme.rs b/crates/ui/src/theme.rs index fc954805..1aba2f95 100644 --- a/crates/ui/src/theme.rs +++ b/crates/ui/src/theme.rs @@ -1,12 +1,12 @@ -use std::ops::{Deref, DerefMut}; - use gpui::{ - hsla, point, px, App, BoxShadow, Global, Hsla, Pixels, SharedString, Window, WindowAppearance, + hsla, point, px, transparent_black, App, BoxShadow, Global, Hsla, Pixels, SharedString, Window, + WindowAppearance, }; use schemars::JsonSchema; use serde::{Deserialize, Serialize}; +use std::ops::{Deref, DerefMut}; -use crate::{scroll::ScrollbarShow, Colorize as _}; +use crate::{colors::*, scroll::ScrollbarShow}; pub fn init(cx: &mut App) { Theme::sync_system_appearance(None, cx); @@ -256,199 +256,199 @@ pub struct ThemeColor { impl ThemeColor { pub fn light() -> Self { Self { - accent: hsl(240.0, 4.8, 93.9), - accent_foreground: hsl(240.0, 5.9, 10.0), - accordion: hsl(0.0, 0.0, 100.0), - accordion_active: hsl(240.0, 5.9, 90.0), - accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7), - background: hsl(0.0, 0.0, 100.), - border: hsl(240.0, 5.9, 90.0), - card: hsl(0.0, 0.0, 100.0), - card_foreground: hsl(240.0, 10.0, 3.9), - caret: hsl(240.0, 10., 3.9), - chart_1: crate::blue_300(), - chart_2: crate::blue_500(), - chart_3: crate::blue_600(), - chart_4: crate::blue_700(), - chart_5: crate::blue_800(), - danger: crate::red_500(), - danger_active: crate::red_600(), - danger_foreground: crate::red_50(), - danger_hover: crate::red_500().opacity(0.9), - description_list_label: hsl(240.0, 5.9, 96.9), - description_list_label_foreground: hsl(240.0, 5.9, 10.0), - drag_border: crate::blue_500(), - drop_target: hsl(235.0, 30., 44.0).opacity(0.25), - foreground: hsl(240.0, 10., 3.9), - info: crate::sky_500(), - info_active: crate::sky_600(), - info_hover: crate::sky_500().opacity(0.9), - info_foreground: crate::sky_50(), - input: hsl(0.0, 0.09, 88.), - link: hsl(221.0, 83.0, 53.0), - link_active: hsl(221.0, 83.0, 53.0).darken(0.2), - link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2), - list: hsl(0.0, 0.0, 100.), - list_active: hsl(211.0, 97.0, 85.0).opacity(0.2), - list_active_border: hsl(211.0, 97.0, 85.0), - list_even: hsl(240.0, 5.0, 96.0), - list_head: hsl(0.0, 0.0, 100.), - list_hover: hsl(240.0, 4.8, 95.0), - muted: hsl(240.0, 4.8, 95.9), - muted_foreground: hsl(240.0, 3.8, 46.1), - popover: hsl(0.0, 0.0, 100.0), - popover_foreground: hsl(240.0, 10.0, 3.9), - primary: hsl(223.0, 5.9, 10.0), - primary_active: hsl(223.0, 1.9, 25.0), - primary_foreground: hsl(223.0, 0.0, 98.0), - primary_hover: hsl(223.0, 5.9, 15.0), - progress_bar: hsl(223.0, 5.9, 10.0), - ring: hsl(240.0, 5.9, 65.0), - scrollbar: hsl(0., 0., 98.).opacity(0.95), - scrollbar_thumb: hsl(0., 0., 69.).opacity(0.9), - scrollbar_thumb_hover: hsl(0., 0., 59.), - secondary: hsl(240.0, 5.9, 96.9), - secondary_active: hsl(240.0, 5.9, 93.), - secondary_foreground: hsl(240.0, 59.0, 10.), - secondary_hover: hsl(240.0, 5.9, 98.), - selection: hsl(211.0, 97.0, 85.0), - sidebar: hsl(0.0, 0.0, 98.0), - sidebar_accent: crate::zinc_200(), - sidebar_accent_foreground: hsl(240.0, 5.9, 10.0), - sidebar_border: hsl(220.0, 13.0, 91.0), - sidebar_foreground: hsl(240.0, 5.3, 26.1), - sidebar_primary: hsl(240.0, 5.9, 10.0), - sidebar_primary_foreground: hsl(0.0, 0.0, 98.0), - skeleton: hsl(223.0, 5.9, 10.0).opacity(0.1), - slider_bar: hsl(223.0, 5.9, 10.0), - slider_thumb: hsl(0.0, 0.0, 100.0), - success: crate::green_500(), - success_active: crate::green_600(), - success_hover: crate::green_500().opacity(0.9), - success_foreground: crate::gray_50(), - switch: crate::zinc_300(), + accent: neutral_100(), + accent_foreground: neutral_900(), + accordion: white(), + accordion_active: neutral_200(), + accordion_hover: neutral_100(), + background: white(), + border: neutral_200(), + card: white(), + card_foreground: neutral_950(), + caret: neutral_950(), + chart_1: blue_300(), + chart_2: blue_500(), + chart_3: blue_600(), + chart_4: blue_700(), + chart_5: blue_800(), + danger: red_500(), + danger_active: red_600(), + danger_foreground: red_50(), + danger_hover: red_500().opacity(0.9), + description_list_label: neutral_100(), + description_list_label_foreground: neutral_900(), + drag_border: blue_500(), + drop_target: blue_500().opacity(0.25), + foreground: neutral_950(), + info: sky_500(), + info_active: sky_600(), + info_hover: sky_500().opacity(0.9), + info_foreground: sky_50(), + input: neutral_200(), + link: neutral_950(), + link_active: neutral_950(), + link_hover: neutral_800(), + list: white(), + list_active: blue_200().opacity(0.2), + list_active_border: blue_400(), + list_even: neutral_50(), + list_head: neutral_50(), + list_hover: neutral_100(), + muted: neutral_100(), + muted_foreground: neutral_500(), + popover: white(), + popover_foreground: neutral_950(), + primary: neutral_900(), + primary_active: neutral_950(), + primary_foreground: neutral_50(), + primary_hover: neutral_800(), + progress_bar: neutral_900(), + ring: neutral_950(), + 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_active: neutral_300(), + secondary_foreground: neutral_900(), + secondary_hover: neutral_100().darken(0.05).opacity(0.8), + selection: blue_200(), + sidebar: neutral_50(), + sidebar_accent: neutral_200(), + sidebar_accent_foreground: neutral_900(), + sidebar_border: neutral_200(), + sidebar_foreground: neutral_900(), + sidebar_primary: neutral_900(), + sidebar_primary_foreground: neutral_50(), + skeleton: neutral_50().opacity(0.1), + slider_bar: neutral_900(), + slider_thumb: white(), + success: green_500(), + success_active: green_600(), + success_hover: green_500().opacity(0.9), + success_foreground: gray_50(), + switch: neutral_300(), tab: gpui::transparent_black(), - 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), - table_active_border: hsl(211.0, 97.0, 85.0), - table_even: hsl(240.0, 5.0, 96.0), - table_head: hsl(0.0, 0.0, 100.), - table_head_foreground: hsl(240.0, 5.0, 34.), - table_hover: hsl(240.0, 4.8, 95.0), - table_row_border: hsl(240.0, 7.7, 94.5), - tiles: hsl(0.0, 0.0, 95.), - title_bar: hsl(0.0, 0.0, 100.), - title_bar_border: hsl(240.0, 5.9, 90.0), - warning: crate::yellow_500(), - warning_active: crate::yellow_600(), - warning_hover: crate::yellow_500().opacity(0.9), - warning_foreground: crate::gray_50(), - overlay: hsl(0., 0., 0.).opacity(0.06), - window_border: hsl(240.0, 5.9, 78.0), + tab_active: white(), + tab_active_foreground: neutral_900(), + tab_bar: neutral_100(), + tab_bar_segmented: neutral_100(), + tab_foreground: neutral_700(), + table: white(), + table_active: blue_200().opacity(0.2), + table_active_border: blue_400(), + table_even: neutral_50(), + table_head: neutral_50(), + table_head_foreground: neutral_500(), + table_hover: neutral_100(), + table_row_border: neutral_200().opacity(0.7), + tiles: neutral_50(), + title_bar: white(), + title_bar_border: neutral_200(), + warning: yellow_500(), + warning_active: yellow_600(), + warning_hover: yellow_500().opacity(0.9), + warning_foreground: gray_50(), + overlay: black().opacity(0.05), + window_border: neutral_300(), } } pub fn dark() -> Self { Self { - accent: hsl(240.0, 3.7, 15.9), - accent_foreground: hsl(0.0, 0.0, 78.0), - accordion: hsl(299.0, 2., 11.), - accordion_active: hsl(240.0, 3.7, 16.9), - accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7), - background: hsl(0.0, 0.0, 8.0), - border: hsl(240.0, 3.7, 16.9), - card: hsl(0.0, 0.0, 8.0), - card_foreground: hsl(0.0, 0.0, 78.0), - caret: hsl(0., 0., 78.), - chart_1: crate::blue_300(), - chart_2: crate::blue_500(), - chart_3: crate::blue_600(), - chart_4: crate::blue_700(), - chart_5: crate::blue_800(), - danger: crate::red_800(), - danger_active: crate::red_800().darken(0.2), - danger_foreground: crate::red_50(), - 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(), - drop_target: hsl(235.0, 30., 44.0).opacity(0.1), - foreground: hsl(0., 0., 78.), - info: crate::sky_900(), - info_active: crate::sky_900().darken(0.2), - info_foreground: crate::sky_50(), - info_hover: crate::sky_900().opacity(0.8), - input: hsl(0.0, 0.0, 100.).opacity(0.15), - link: hsl(221.0, 83.0, 53.0), - link_active: hsl(221.0, 83.0, 53.0).darken(0.2), - link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2), - list: hsl(0.0, 0.0, 8.0), - list_active: hsl(240.0, 3.7, 15.0).opacity(0.2), - list_active_border: hsl(240.0, 5.9, 35.5), - list_even: hsl(240.0, 3.7, 10.0), - list_head: hsl(0.0, 0.0, 8.0), - list_hover: hsl(240.0, 3.7, 15.9), - muted: hsl(240.0, 3.7, 15.9), - muted_foreground: hsl(240.0, 5.0, 34.), - popover: hsl(0.0, 0.0, 10.), - popover_foreground: hsl(0.0, 0.0, 78.0), - primary: hsl(223.0, 0.0, 98.0), - primary_active: hsl(223.0, 0.0, 80.0), - primary_foreground: hsl(223.0, 5.9, 10.0), - primary_hover: hsl(223.0, 0.0, 90.0), - progress_bar: hsl(223.0, 0.0, 98.0), - ring: hsl(240.0, 4.9, 83.9), - scrollbar: hsl(240.0, 0.0, 10.0).opacity(0.95), - scrollbar_thumb: hsl(0., 0., 48.).opacity(0.9), - scrollbar_thumb_hover: hsl(0., 0., 68.), - secondary: hsl(240.0, 0., 13.0), - secondary_active: hsl(240.0, 0., 13.), - secondary_foreground: hsl(0.0, 0.0, 78.0), - secondary_hover: hsl(240.0, 0., 15.), - selection: hsl(211.0, 97.0, 22.0), - sidebar: hsl(240.0, 0.0, 10.0), - sidebar_accent: crate::zinc_800(), - sidebar_accent_foreground: hsl(240.0, 4.8, 95.9), - sidebar_border: hsl(240.0, 3.7, 15.9), - sidebar_foreground: hsl(240.0, 4.8, 95.9), - sidebar_primary: hsl(0.0, 0.0, 98.0), - sidebar_primary_foreground: hsl(240.0, 5.9, 10.0), - 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_800(), - success_active: crate::green_800().darken(0.2), - success_foreground: crate::green_50(), - success_hover: crate::green_800().opacity(0.8), - switch: crate::zinc_600(), - tab: gpui::transparent_black(), - 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), - table_active_border: hsl(240.0, 5.9, 35.5), - table_even: hsl(240.0, 3.7, 10.0), - table_head: hsl(0.0, 0.0, 8.0), - table_head_foreground: hsl(0., 0., 78.).opacity(0.7), - table_hover: hsl(240.0, 3.7, 15.9).opacity(0.5), - table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5), - 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_800(), - warning_active: crate::yellow_800().darken(0.2), - warning_foreground: crate::yellow_50(), - warning_hover: crate::yellow_800().opacity(0.9), - overlay: hsl(0., 100., 100.).opacity(0.06), - window_border: hsl(240.0, 3.7, 28.0), + accent: neutral_800(), + accent_foreground: neutral_50(), + accordion: neutral_950(), + accordion_active: neutral_800(), + accordion_hover: neutral_800().opacity(0.9), + background: neutral_950(), + border: neutral_800(), + card: neutral_950(), + card_foreground: neutral_50(), + caret: neutral_50(), + chart_1: blue_300(), + chart_2: blue_500(), + chart_3: blue_600(), + chart_4: blue_700(), + chart_5: blue_800(), + danger: red_900(), + danger_active: red_900().darken(0.2), + danger_foreground: red_50(), + danger_hover: red_900().lighten(0.1), + description_list_label: neutral_900(), + description_list_label_foreground: neutral_100(), + drag_border: blue_500(), + drop_target: blue_500().opacity(0.1), + foreground: neutral_50(), + info: sky_900(), + info_active: sky_900().darken(0.2), + info_foreground: sky_50(), + info_hover: sky_900().lighten(0.1), + input: neutral_800(), + link: neutral_50(), + link_active: neutral_50().darken(0.2), + link_hover: neutral_50().lighten(0.2), + list: neutral_950(), + list_active: blue_800().opacity(0.2), + list_active_border: blue_700(), + list_even: neutral_900().opacity(0.8), + list_head: neutral_900().opacity(0.8), + list_hover: neutral_800(), + muted: neutral_800(), + muted_foreground: neutral_500(), + popover: neutral_950(), + popover_foreground: neutral_50(), + primary: neutral_50(), + primary_active: neutral_300(), + primary_foreground: neutral_900(), + primary_hover: neutral_200(), + progress_bar: neutral_100(), + ring: neutral_300(), + 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_foreground: neutral_50(), + secondary_hover: neutral_800().lighten(0.1), + selection: blue_700(), + sidebar: neutral_950(), + sidebar_accent: neutral_800(), + sidebar_accent_foreground: neutral_100(), + sidebar_border: neutral_800(), + sidebar_foreground: neutral_100(), + sidebar_primary: neutral_100(), + sidebar_primary_foreground: neutral_950(), + skeleton: neutral_900(), + slider_bar: neutral_50(), + slider_thumb: neutral_950(), + success: green_900(), + success_active: green_900().darken(0.2), + success_foreground: green_50(), + success_hover: green_900().lighten(0.1), + switch: neutral_700(), + tab: transparent_black(), + tab_active: neutral_950(), + tab_active_foreground: neutral_50(), + tab_bar: neutral_900(), + tab_bar_segmented: neutral_900(), + tab_foreground: neutral_300(), + table: neutral_950(), + table_active: blue_800().opacity(0.2), + table_active_border: blue_700(), + table_even: neutral_900().opacity(0.8), + table_head: neutral_900().opacity(0.8), + table_head_foreground: neutral_600(), + table_hover: neutral_800(), + table_row_border: neutral_800().opacity(0.7), + tiles: neutral_900(), + title_bar: neutral_950(), + title_bar_border: neutral_800(), + warning: yellow_900(), + warning_active: yellow_900().darken(0.2), + warning_foreground: yellow_50(), + warning_hover: yellow_900().lighten(0.1), + overlay: white().opacity(0.03), + window_border: neutral_700(), } } } diff --git a/crates/ui/src/time/date_picker.rs b/crates/ui/src/time/date_picker.rs index d11a20c5..bd5e3ab6 100644 --- a/crates/ui/src/time/date_picker.rs +++ b/crates/ui/src/time/date_picker.rs @@ -341,7 +341,7 @@ impl RenderOnce for DatePicker { .border_1() .border_color(cx.theme().input) .rounded(cx.theme().radius) - .when(cx.theme().shadow, |this| this.shadow_sm()) + .when(cx.theme().shadow, |this| this.shadow_xs()) .overflow_hidden() .input_text_size(self.size) .when(is_focused, |this| this.focused_border(cx))