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

theme: Update theme details to match Shadcn. (#1009)

Browse source 
## Light

<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/b1893648-5994-4c08-a79a-30b10dc62c47"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/de5b4e13-7889-473b-b0c0-9ac11de0a4b0"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/9f17c2a1-3a71-4d56-be6c-49f26f5e7406"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/a4e99a61-a618-4c3b-a237-93bbc17d4cae"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/64313ae5-8284-46ff-a75f-5a14a1e3b339"
/>
<img width="1193" alt="image"
src="https://github.com/user-attachments/assets/5c134172-0ab6-4299-950d-bac3dda7b61d"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/c8816288-d008-490d-9db3-4fa796278001"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/d903a854-15e3-48aa-8ebd-969c1c91c624"
/>



## Dark

<img width="1467" alt="image"
src="https://github.com/user-attachments/assets/720418b4-8a9b-42c9-814b-a0be660e8eba"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/4ca20f31-c998-40bb-b4bf-6079c506f9ec"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/ae828624-55b3-4d33-8a20-2c71a0a838cc"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/7014c76c-5e18-4cd5-9cf1-6bccbb58e56a"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/6e1c514d-5f76-460a-9c7e-a38f2f0e712a"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/07ad8c20-317b-4209-9f92-b500f53dd4c0"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/6bd2969d-9bec-4ed7-9280-109a81144dfa"
/>
This commit is contained in:
Jason Lee 2025-06-25 16:40:27 +08:00 committed by GitHub
parent 67f0ffbc9c
commit c8481bee19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 283 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,8 +7,9 @@ use gpui::{
use gpui_component::{ use gpui_component::{
button::{Button, ButtonGroup}, button::{Button, ButtonGroup},
divider::Divider, divider::Divider,
gray_100, gray_800, h_flex, h_flex,
label::Label, label::Label,
neutral_100, neutral_800,
scroll::{Scrollbar, ScrollbarAxis, ScrollbarState}, scroll::{Scrollbar, ScrollbarAxis, ScrollbarState},
v_flex, v_virtual_list, ActiveTheme as _, Selectable, StyledExt as _, v_flex, v_virtual_list, ActiveTheme as _, Selectable, StyledExt as _,
}; };
@ -238,9 +239,9 @@ impl Render for ScrollableStory {
.bg( .bg(
if cx.theme().mode.is_dark() if cx.theme().mode.is_dark()
{ {
gray_800() neutral_800()
} else { } else {
gray_100() neutral_100()
}, },
) )
.child(if i == 0 { .child(if i == 0 {

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

@ -3,7 +3,7 @@ use gpui::{
Window, 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; use crate::section;
@ -56,7 +56,7 @@ impl Render for TagStory {
.child(Tag::warning().child("Warning")) .child(Tag::warning().child("Warning"))
.child(Tag::info().child("Info")) .child(Tag::info().child("Info"))
.child( .child(
Tag::custom(indigo_500(), indigo_500(), indigo_500()).child("Custom"), Tag::custom(indigo_500(), indigo_50(), indigo_500()).child("Custom"),
), ),
), ),
) )

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

@ -400,7 +400,7 @@ impl RenderOnce for Button {
.when(self.variant.is_link(), |this| this.cursor_pointer()) .when(self.variant.is_link(), |this| this.cursor_pointer())
.overflow_hidden() .overflow_hidden()
.when(cx.theme().shadow && normal_style.shadow, |this| { .when(cx.theme().shadow && normal_style.shadow, |this| {
this.shadow_sm() this.shadow_xs()
}) })
.when(!style.no_padding(), |this| { .when(!style.no_padding(), |this| {
if self.label.is_none() && self.children.is_empty() { 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 { match self {
ButtonVariant::Primary => cx.theme().primary, ButtonVariant::Secondary => {
ButtonVariant::Secondary => cx.theme().border, if outline {
ButtonVariant::Danger => cx.theme().danger, cx.theme().border
ButtonVariant::Info => cx.theme().info, } else {
ButtonVariant::Warning => cx.theme().warning, bg
ButtonVariant::Success => cx.theme().success, }
}
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 => { ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
cx.theme().transparent 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 { match self {
ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => true, ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => outline,
ButtonVariant::Custom(c) => c.shadow, ButtonVariant::Custom(c) => c.shadow,
_ => false, _ => false,
} }
@ -646,7 +682,7 @@ impl ButtonVariant {
fn normal(&self, outline: bool, cx: &mut App) -> ButtonVariantStyle { fn normal(&self, outline: bool, cx: &mut App) -> ButtonVariantStyle {
let bg = self.bg_color(outline, cx); 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 fg = self.text_color(outline, cx);
let underline = self.underline(cx); let underline = self.underline(cx);
let shadow = self.shadow(outline, 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 { let fg = match self {
ButtonVariant::Link => cx.theme().link_hover, ButtonVariant::Link => cx.theme().link_hover,
_ => self.text_color(outline, cx), _ => 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 { let fg = match self {
ButtonVariant::Link => cx.theme().link_active, ButtonVariant::Link => cx.theme().link_active,
ButtonVariant::Text => cx.theme().foreground.opacity(0.7), ButtonVariant::Text => cx.theme().foreground.opacity(0.7),
@ -820,7 +856,7 @@ impl ButtonVariant {
ButtonVariant::Custom(colors) => colors.active, ButtonVariant::Custom(colors) => colors.active,
}; };
let border = self.border_color(outline, cx); let border = self.border_color(bg, outline, cx);
let fg = match self { let fg = match self {
ButtonVariant::Link => cx.theme().link_active, ButtonVariant::Link => cx.theme().link_active,
ButtonVariant::Text => cx.theme().foreground.opacity(0.7), ButtonVariant::Text => cx.theme().foreground.opacity(0.7),

4
crates/ui/src/button/toggle.rs
View file

@ -7,7 +7,7 @@ use gpui::{
}; };
use smallvec::{smallvec, SmallVec}; 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)] #[derive(Default, Copy, Debug, Clone, PartialEq, Eq, Hash)]
pub enum ToggleVariant { pub enum ToggleVariant {
@ -132,7 +132,7 @@ impl RenderOnce for Toggle {
this.border_1() this.border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().background) .bg(cx.theme().background)
.when(cx.theme().shadow, |this| this.shadow_sm()) .when(cx.theme().shadow, |this| this.shadow_xs())
}) })
.when(hoverable, |this| { .when(hoverable, |this| {
this.hover(|this| { this.hover(|this| {

4
crates/ui/src/checkbox.rs
View file

@ -1,6 +1,6 @@
use crate::{ use crate::{
text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable, Sizable, Size, text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable, Sizable, Size,
StyledExt as _, StyleSized as _, StyledExt as _,
}; };
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, px, relative, rems, svg, AnyElement, App, Div, ElementId, div, prelude::FluentBuilder as _, px, relative, rems, svg, AnyElement, App, Div, ElementId,
@ -150,7 +150,7 @@ impl RenderOnce for Checkbox {
.border_1() .border_1()
.border_color(color) .border_color(color)
.rounded(radius) .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 { .map(|this| match self.checked {
false => this.bg(cx.theme().background), false => this.bg(cx.theme().background),
_ => this.bg(color), _ => this.bg(color),

4
crates/ui/src/color_picker.rs
View file

@ -265,7 +265,7 @@ impl ColorPicker {
this.hover(|this| { this.hover(|this| {
this.border_color(color.darken(0.3)) this.border_color(color.darken(0.3))
.bg(color.lighten(0.1)) .bg(color.lighten(0.1))
.shadow_sm() .shadow_xs()
}) })
.active(|this| this.border_color(color.darken(0.5)).bg(color.darken(0.2))) .active(|this| this.border_color(color.darken(0.5)).bg(color.darken(0.2)))
.on_mouse_move(window.listener_for(&state, move |state, _, _, cx| { .on_mouse_move(window.listener_for(&state, move |state, _, _, cx| {
@ -396,7 +396,7 @@ impl RenderOnce for ColorPicker {
.border_1() .border_1()
.border_color(cx.theme().input) .border_color(cx.theme().input)
.rounded(cx.theme().radius) .rounded(cx.theme().radius)
.shadow_sm() .shadow_xs()
.overflow_hidden() .overflow_hidden()
.size_with(self.size) .size_with(self.size)
.when_some(state.value, |this, value| { .when_some(state.value, |this, value| {

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

@ -718,7 +718,7 @@ where
.border_1() .border_1()
.border_color(cx.theme().input) .border_color(cx.theme().input)
.rounded(cx.theme().radius) .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 }) .map(|this| if self.disabled { this } else { this })
.overflow_hidden() .overflow_hidden()
.input_text_size(self.size) .input_text_size(self.size)

4
crates/ui/src/input/hover_popover.rs
View file

@ -9,7 +9,7 @@ use crate::{
highlighter::LanguageRegistry, highlighter::LanguageRegistry,
input::{InputState, Marker}, input::{InputState, Marker},
text::TextView, text::TextView,
ActiveTheme as _, ActiveTheme as _, StyleSized as _,
}; };
pub struct DiagnosticPopover { pub struct DiagnosticPopover {
@ -112,7 +112,7 @@ impl Render for DiagnosticPopover {
.border_1() .border_1()
.border_color(border) .border_color(border)
.rounded(cx.theme().radius) .rounded(cx.theme().radius)
.shadow_sm() .shadow_xs()
.child(TextView::markdown("message", message)) .child(TextView::markdown("message", message))
.child( .child(
canvas( canvas(

4
crates/ui/src/input/otp_input.rs
View file

@ -6,7 +6,7 @@ use gpui::{
}; };
use super::{blink_cursor::BlinkCursor, InputEvent}; 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 { pub struct OtpState {
focus_handle: FocusHandle, focus_handle: FocusHandle,
@ -244,7 +244,7 @@ impl RenderOnce for OtpInput {
.border_color(cx.theme().input) .border_color(cx.theme().input)
.bg(cx.theme().background) .bg(cx.theme().background)
.when(is_input_focused, |this| this.border_color(cx.theme().ring)) .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() .items_center()
.justify_center() .justify_center()
.rounded(cx.theme().radius) .rounded(cx.theme().radius)

2
crates/ui/src/input/text_input.rs
View file

@ -259,7 +259,7 @@ impl RenderOnce for TextInput {
.when(self.bordered, |this| { .when(self.bordered, |this| {
this.border_color(cx.theme().input) this.border_color(cx.theme().input)
.border_1() .border_1()
.when(cx.theme().shadow, |this| this.shadow_sm()) .when(cx.theme().shadow, |this| this.shadow_xs())
.when(focused && self.focus_bordered, |this| { .when(focused && self.focus_bordered, |this| {
this.focused_border(cx) this.focused_border(cx)
}) })

6
crates/ui/src/radio.rs
View file

@ -1,6 +1,8 @@
use std::rc::Rc; 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::{ use gpui::{
div, prelude::FluentBuilder, relative, svg, AnyElement, App, Axis, Div, ElementId, div, prelude::FluentBuilder, relative, svg, AnyElement, App, Axis, Div, ElementId,
InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString,
@ -106,7 +108,7 @@ impl RenderOnce for Radio {
.rounded_full() .rounded_full()
.border_1() .border_1()
.border_color(border_color) .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 { .map(|this| match self.checked {
false => this.bg(cx.theme().background), false => this.bg(cx.theme().background),
_ => this.bg(bg), _ => this.bg(bg),

2
crates/ui/src/sidebar/menu.rs
View file

@ -165,7 +165,7 @@ impl RenderOnce for SidebarMenuItem {
return this; return this;
} }
this.bg(cx.theme().accent) this.bg(cx.theme().sidebar_accent.opacity(0.8))
.text_color(cx.theme().sidebar_accent_foreground) .text_color(cx.theme().sidebar_accent_foreground)
}) })
.when(is_active && !is_submenu, |this| { .when(is_active && !is_submenu, |this| {

16
crates/ui/src/styled.rs
View file

@ -5,8 +5,8 @@ use crate::{
ActiveTheme, ActiveTheme,
}; };
use gpui::{ use gpui::{
div, px, App, Axis, DefiniteLength, Div, Edges, Element, ElementId, FocusHandle, Pixels, div, hsla, point, px, App, Axis, BoxShadow, DefiniteLength, Div, Edges, Element, ElementId,
Refineable, StyleRefinement, Styled, Window, FocusHandle, Pixels, Refineable, StyleRefinement, Styled, Window,
}; };
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
@ -358,6 +358,7 @@ pub trait Sizable: Sized {
#[allow(unused)] #[allow(unused)]
pub trait StyleSized<T: Styled> { pub trait StyleSized<T: Styled> {
fn shadow_xs(self) -> Self;
fn input_text_size(self, size: Size) -> Self; fn input_text_size(self, size: Size) -> Self;
fn input_size(self, size: Size) -> Self; fn input_size(self, size: Size) -> Self;
fn input_pl(self, size: Size) -> Self; fn input_pl(self, size: Size) -> Self;
@ -479,6 +480,17 @@ impl<T: Styled> StyleSized<T> for T {
_ => self.text_base(), _ => 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 { pub trait AxisExt {

0
crates/ui/src/tab.rs → crates/ui/src/tab/mod.rs
View file

6
crates/ui/src/tab/tab.rs
View file

@ -1,6 +1,8 @@
use std::sync::Arc; 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::prelude::FluentBuilder as _;
use gpui::{ use gpui::{
div, px, AnyElement, App, ClickEvent, Div, Edges, ElementId, Hsla, InteractiveElement, div, px, AnyElement, App, ClickEvent, Div, Edges, ElementId, Hsla, InteractiveElement,
@ -642,7 +644,7 @@ impl RenderOnce for Tab {
}) })
.bg(tab_style.inner_bg) .bg(tab_style.inner_bg)
.rounded(tab_style.inner_radius) .rounded(tab_style.inner_radius)
.when(tab_style.shadow, |this| this.shadow_sm()) .when(tab_style.shadow, |this| this.shadow_xs())
.hover(|this| { .hover(|this| {
this.bg(hover_style.inner_bg) this.bg(hover_style.inner_bg)
.rounded(hover_style.inner_radius) .rounded(hover_style.inner_radius)

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

@ -1,12 +1,12 @@
use std::ops::{Deref, DerefMut};
use gpui::{ 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 schemars::JsonSchema;
use serde::{Deserialize, Serialize}; 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) { pub fn init(cx: &mut App) {
Theme::sync_system_appearance(None, cx); Theme::sync_system_appearance(None, cx);
@ -256,199 +256,199 @@ pub struct ThemeColor {
impl ThemeColor { impl ThemeColor {
pub fn light() -> Self { pub fn light() -> Self {
Self { Self {
accent: hsl(240.0, 4.8, 93.9), accent: neutral_100(),
accent_foreground: hsl(240.0, 5.9, 10.0), accent_foreground: neutral_900(),
accordion: hsl(0.0, 0.0, 100.0), accordion: white(),
accordion_active: hsl(240.0, 5.9, 90.0), accordion_active: neutral_200(),
accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7), accordion_hover: neutral_100(),
background: hsl(0.0, 0.0, 100.), background: white(),
border: hsl(240.0, 5.9, 90.0), border: neutral_200(),
card: hsl(0.0, 0.0, 100.0), card: white(),
card_foreground: hsl(240.0, 10.0, 3.9), card_foreground: neutral_950(),
caret: hsl(240.0, 10., 3.9), caret: neutral_950(),
chart_1: crate::blue_300(), chart_1: blue_300(),
chart_2: crate::blue_500(), chart_2: blue_500(),
chart_3: crate::blue_600(), chart_3: blue_600(),
chart_4: crate::blue_700(), chart_4: blue_700(),
chart_5: crate::blue_800(), chart_5: blue_800(),
danger: crate::red_500(), danger: red_500(),
danger_active: crate::red_600(), danger_active: red_600(),
danger_foreground: crate::red_50(), danger_foreground: red_50(),
danger_hover: crate::red_500().opacity(0.9), danger_hover: red_500().opacity(0.9),
description_list_label: hsl(240.0, 5.9, 96.9), description_list_label: neutral_100(),
description_list_label_foreground: hsl(240.0, 5.9, 10.0), description_list_label_foreground: neutral_900(),
drag_border: crate::blue_500(), drag_border: blue_500(),
drop_target: hsl(235.0, 30., 44.0).opacity(0.25), drop_target: blue_500().opacity(0.25),
foreground: hsl(240.0, 10., 3.9), foreground: neutral_950(),
info: crate::sky_500(), info: sky_500(),
info_active: crate::sky_600(), info_active: sky_600(),
info_hover: crate::sky_500().opacity(0.9), info_hover: sky_500().opacity(0.9),
info_foreground: crate::sky_50(), info_foreground: sky_50(),
input: hsl(0.0, 0.09, 88.), input: neutral_200(),
link: hsl(221.0, 83.0, 53.0), link: neutral_950(),
link_active: hsl(221.0, 83.0, 53.0).darken(0.2), link_active: neutral_950(),
link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2), link_hover: neutral_800(),
list: hsl(0.0, 0.0, 100.), list: white(),
list_active: hsl(211.0, 97.0, 85.0).opacity(0.2), list_active: blue_200().opacity(0.2),
list_active_border: hsl(211.0, 97.0, 85.0), list_active_border: blue_400(),
list_even: hsl(240.0, 5.0, 96.0), list_even: neutral_50(),
list_head: hsl(0.0, 0.0, 100.), list_head: neutral_50(),
list_hover: hsl(240.0, 4.8, 95.0), list_hover: neutral_100(),
muted: hsl(240.0, 4.8, 95.9), muted: neutral_100(),
muted_foreground: hsl(240.0, 3.8, 46.1), muted_foreground: neutral_500(),
popover: hsl(0.0, 0.0, 100.0), popover: white(),
popover_foreground: hsl(240.0, 10.0, 3.9), popover_foreground: neutral_950(),
primary: hsl(223.0, 5.9, 10.0), primary: neutral_900(),
primary_active: hsl(223.0, 1.9, 25.0), primary_active: neutral_950(),
primary_foreground: hsl(223.0, 0.0, 98.0), primary_foreground: neutral_50(),
primary_hover: hsl(223.0, 5.9, 15.0), primary_hover: neutral_800(),
progress_bar: hsl(223.0, 5.9, 10.0), progress_bar: neutral_900(),
ring: hsl(240.0, 5.9, 65.0), ring: neutral_950(),
scrollbar: hsl(0., 0., 98.).opacity(0.95), scrollbar: neutral_50().opacity(0.5),
scrollbar_thumb: hsl(0., 0., 69.).opacity(0.9), scrollbar_thumb: neutral_400().opacity(0.9),
scrollbar_thumb_hover: hsl(0., 0., 59.), scrollbar_thumb_hover: neutral_400(),
secondary: hsl(240.0, 5.9, 96.9), secondary: neutral_100().darken(0.05),
secondary_active: hsl(240.0, 5.9, 93.), secondary_active: neutral_300(),
secondary_foreground: hsl(240.0, 59.0, 10.), secondary_foreground: neutral_900(),
secondary_hover: hsl(240.0, 5.9, 98.), secondary_hover: neutral_100().darken(0.05).opacity(0.8),
selection: hsl(211.0, 97.0, 85.0), selection: blue_200(),
sidebar: hsl(0.0, 0.0, 98.0), sidebar: neutral_50(),
sidebar_accent: crate::zinc_200(), sidebar_accent: neutral_200(),
sidebar_accent_foreground: hsl(240.0, 5.9, 10.0), sidebar_accent_foreground: neutral_900(),
sidebar_border: hsl(220.0, 13.0, 91.0), sidebar_border: neutral_200(),
sidebar_foreground: hsl(240.0, 5.3, 26.1), sidebar_foreground: neutral_900(),
sidebar_primary: hsl(240.0, 5.9, 10.0), sidebar_primary: neutral_900(),
sidebar_primary_foreground: hsl(0.0, 0.0, 98.0), sidebar_primary_foreground: neutral_50(),
skeleton: hsl(223.0, 5.9, 10.0).opacity(0.1), skeleton: neutral_50().opacity(0.1),
slider_bar: hsl(223.0, 5.9, 10.0), slider_bar: neutral_900(),
slider_thumb: hsl(0.0, 0.0, 100.0), slider_thumb: white(),
success: crate::green_500(), success: green_500(),
success_active: crate::green_600(), success_active: green_600(),
success_hover: crate::green_500().opacity(0.9), success_hover: green_500().opacity(0.9),
success_foreground: crate::gray_50(), success_foreground: gray_50(),
switch: crate::zinc_300(), switch: neutral_300(),
tab: gpui::transparent_black(), tab: gpui::transparent_black(),
tab_active: hsl(0.0, 0.0, 100.0), tab_active: white(),
tab_active_foreground: hsl(240.0, 10., 3.9), tab_active_foreground: neutral_900(),
tab_bar: hsl(240.0, 14.3, 95.9), tab_bar: neutral_100(),
tab_bar_segmented: hsl(240.0, 14.3, 95.9), tab_bar_segmented: neutral_100(),
tab_foreground: hsl(240.0, 10., 33.9), tab_foreground: neutral_700(),
table: hsl(0.0, 0.0, 100.), table: white(),
table_active: hsl(211.0, 97.0, 85.0).opacity(0.2), table_active: blue_200().opacity(0.2),
table_active_border: hsl(211.0, 97.0, 85.0), table_active_border: blue_400(),
table_even: hsl(240.0, 5.0, 96.0), table_even: neutral_50(),
table_head: hsl(0.0, 0.0, 100.), table_head: neutral_50(),
table_head_foreground: hsl(240.0, 5.0, 34.), table_head_foreground: neutral_500(),
table_hover: hsl(240.0, 4.8, 95.0), table_hover: neutral_100(),
table_row_border: hsl(240.0, 7.7, 94.5), table_row_border: neutral_200().opacity(0.7),
tiles: hsl(0.0, 0.0, 95.), tiles: neutral_50(),
title_bar: hsl(0.0, 0.0, 100.), title_bar: white(),
title_bar_border: hsl(240.0, 5.9, 90.0), title_bar_border: neutral_200(),
warning: crate::yellow_500(), warning: yellow_500(),
warning_active: crate::yellow_600(), warning_active: yellow_600(),
warning_hover: crate::yellow_500().opacity(0.9), warning_hover: yellow_500().opacity(0.9),
warning_foreground: crate::gray_50(), warning_foreground: gray_50(),
overlay: hsl(0., 0., 0.).opacity(0.06), overlay: black().opacity(0.05),
window_border: hsl(240.0, 5.9, 78.0), window_border: neutral_300(),
} }
} }
pub fn dark() -> Self { pub fn dark() -> Self {
Self { Self {
accent: hsl(240.0, 3.7, 15.9), accent: neutral_800(),
accent_foreground: hsl(0.0, 0.0, 78.0), accent_foreground: neutral_50(),
accordion: hsl(299.0, 2., 11.), accordion: neutral_950(),
accordion_active: hsl(240.0, 3.7, 16.9), accordion_active: neutral_800(),
accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7), accordion_hover: neutral_800().opacity(0.9),
background: hsl(0.0, 0.0, 8.0), background: neutral_950(),
border: hsl(240.0, 3.7, 16.9), border: neutral_800(),
card: hsl(0.0, 0.0, 8.0), card: neutral_950(),
card_foreground: hsl(0.0, 0.0, 78.0), card_foreground: neutral_50(),
caret: hsl(0., 0., 78.), caret: neutral_50(),
chart_1: crate::blue_300(), chart_1: blue_300(),
chart_2: crate::blue_500(), chart_2: blue_500(),
chart_3: crate::blue_600(), chart_3: blue_600(),
chart_4: crate::blue_700(), chart_4: blue_700(),
chart_5: crate::blue_800(), chart_5: blue_800(),
danger: crate::red_800(), danger: red_900(),
danger_active: crate::red_800().darken(0.2), danger_active: red_900().darken(0.2),
danger_foreground: crate::red_50(), danger_foreground: red_50(),
danger_hover: crate::red_800().opacity(0.9), danger_hover: red_900().lighten(0.1),
description_list_label: hsl(240.0, 0., 13.0), description_list_label: neutral_900(),
description_list_label_foreground: hsl(0.0, 0.0, 78.0), description_list_label_foreground: neutral_100(),
drag_border: crate::blue_500(), drag_border: blue_500(),
drop_target: hsl(235.0, 30., 44.0).opacity(0.1), drop_target: blue_500().opacity(0.1),
foreground: hsl(0., 0., 78.), foreground: neutral_50(),
info: crate::sky_900(), info: sky_900(),
info_active: crate::sky_900().darken(0.2), info_active: sky_900().darken(0.2),
info_foreground: crate::sky_50(), info_foreground: sky_50(),
info_hover: crate::sky_900().opacity(0.8), info_hover: sky_900().lighten(0.1),
input: hsl(0.0, 0.0, 100.).opacity(0.15), input: neutral_800(),
link: hsl(221.0, 83.0, 53.0), link: neutral_50(),
link_active: hsl(221.0, 83.0, 53.0).darken(0.2), link_active: neutral_50().darken(0.2),
link_hover: hsl(221.0, 83.0, 53.0).lighten(0.2), link_hover: neutral_50().lighten(0.2),
list: hsl(0.0, 0.0, 8.0), list: neutral_950(),
list_active: hsl(240.0, 3.7, 15.0).opacity(0.2), list_active: blue_800().opacity(0.2),
list_active_border: hsl(240.0, 5.9, 35.5), list_active_border: blue_700(),
list_even: hsl(240.0, 3.7, 10.0), list_even: neutral_900().opacity(0.8),
list_head: hsl(0.0, 0.0, 8.0), list_head: neutral_900().opacity(0.8),
list_hover: hsl(240.0, 3.7, 15.9), list_hover: neutral_800(),
muted: hsl(240.0, 3.7, 15.9), muted: neutral_800(),
muted_foreground: hsl(240.0, 5.0, 34.), muted_foreground: neutral_500(),
popover: hsl(0.0, 0.0, 10.), popover: neutral_950(),
popover_foreground: hsl(0.0, 0.0, 78.0), popover_foreground: neutral_50(),
primary: hsl(223.0, 0.0, 98.0), primary: neutral_50(),
primary_active: hsl(223.0, 0.0, 80.0), primary_active: neutral_300(),
primary_foreground: hsl(223.0, 5.9, 10.0), primary_foreground: neutral_900(),
primary_hover: hsl(223.0, 0.0, 90.0), primary_hover: neutral_200(),
progress_bar: hsl(223.0, 0.0, 98.0), progress_bar: neutral_100(),
ring: hsl(240.0, 4.9, 83.9), ring: neutral_300(),
scrollbar: hsl(240.0, 0.0, 10.0).opacity(0.95), scrollbar: neutral_900().opacity(0.5),
scrollbar_thumb: hsl(0., 0., 48.).opacity(0.9), scrollbar_thumb: neutral_700().opacity(0.9),
scrollbar_thumb_hover: hsl(0., 0., 68.), scrollbar_thumb_hover: neutral_700(),
secondary: hsl(240.0, 0., 13.0), secondary: neutral_800(),
secondary_active: hsl(240.0, 0., 13.), secondary_active: neutral_800().darken(0.2),
secondary_foreground: hsl(0.0, 0.0, 78.0), secondary_foreground: neutral_50(),
secondary_hover: hsl(240.0, 0., 15.), secondary_hover: neutral_800().lighten(0.1),
selection: hsl(211.0, 97.0, 22.0), selection: blue_700(),
sidebar: hsl(240.0, 0.0, 10.0), sidebar: neutral_950(),
sidebar_accent: crate::zinc_800(), sidebar_accent: neutral_800(),
sidebar_accent_foreground: hsl(240.0, 4.8, 95.9), sidebar_accent_foreground: neutral_100(),
sidebar_border: hsl(240.0, 3.7, 15.9), sidebar_border: neutral_800(),
sidebar_foreground: hsl(240.0, 4.8, 95.9), sidebar_foreground: neutral_100(),
sidebar_primary: hsl(0.0, 0.0, 98.0), sidebar_primary: neutral_100(),
sidebar_primary_foreground: hsl(240.0, 5.9, 10.0), sidebar_primary_foreground: neutral_950(),
skeleton: hsla(223.0, 0.0, 98.0, 0.1), skeleton: neutral_900(),
slider_bar: hsl(223.0, 0.0, 98.0), slider_bar: neutral_50(),
slider_thumb: hsl(0.0, 0.0, 8.0), slider_thumb: neutral_950(),
success: crate::green_800(), success: green_900(),
success_active: crate::green_800().darken(0.2), success_active: green_900().darken(0.2),
success_foreground: crate::green_50(), success_foreground: green_50(),
success_hover: crate::green_800().opacity(0.8), success_hover: green_900().lighten(0.1),
switch: crate::zinc_600(), switch: neutral_700(),
tab: gpui::transparent_black(), tab: transparent_black(),
tab_active: hsl(0.0, 0.0, 8.0), tab_active: neutral_950(),
tab_active_foreground: hsl(0., 0., 78.), tab_active_foreground: neutral_50(),
tab_bar: hsl(299.0, 0., 5.5), tab_bar: neutral_900(),
tab_bar_segmented: hsl(299.0, 0., 5.5), tab_bar_segmented: neutral_900(),
tab_foreground: hsl(0., 0., 78.), tab_foreground: neutral_300(),
table: hsl(0.0, 0.0, 8.0), table: neutral_950(),
table_active: hsl(240.0, 3.7, 15.0).opacity(0.2), table_active: blue_800().opacity(0.2),
table_active_border: hsl(240.0, 5.9, 35.5), table_active_border: blue_700(),
table_even: hsl(240.0, 3.7, 10.0), table_even: neutral_900().opacity(0.8),
table_head: hsl(0.0, 0.0, 8.0), table_head: neutral_900().opacity(0.8),
table_head_foreground: hsl(0., 0., 78.).opacity(0.7), table_head_foreground: neutral_600(),
table_hover: hsl(240.0, 3.7, 15.9).opacity(0.5), table_hover: neutral_800(),
table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5), table_row_border: neutral_800().opacity(0.7),
tiles: hsl(0.0, 0.0, 5.0), tiles: neutral_900(),
title_bar: hsl(0., 0., 9.7), title_bar: neutral_950(),
title_bar_border: hsl(240.0, 3.7, 15.9), title_bar_border: neutral_800(),
warning: crate::yellow_800(), warning: yellow_900(),
warning_active: crate::yellow_800().darken(0.2), warning_active: yellow_900().darken(0.2),
warning_foreground: crate::yellow_50(), warning_foreground: yellow_50(),
warning_hover: crate::yellow_800().opacity(0.9), warning_hover: yellow_900().lighten(0.1),
overlay: hsl(0., 100., 100.).opacity(0.06), overlay: white().opacity(0.03),
window_border: hsl(240.0, 3.7, 28.0), window_border: neutral_700(),
} }
} }
} }

2
crates/ui/src/time/date_picker.rs
View file

@ -341,7 +341,7 @@ impl RenderOnce for DatePicker {
.border_1() .border_1()
.border_color(cx.theme().input) .border_color(cx.theme().input)
.rounded(cx.theme().radius) .rounded(cx.theme().radius)
.when(cx.theme().shadow, |this| this.shadow_sm()) .when(cx.theme().shadow, |this| this.shadow_xs())
.overflow_hidden() .overflow_hidden()
.input_text_size(self.size) .input_text_size(self.size)
.when(is_focused, |this| this.focused_border(cx)) .when(is_focused, |this| this.focused_border(cx))