theme: Update theme details to match Shadcn. (#1009)
## 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
GitHub
parent
67f0ffbc9c
commit
c8481bee19
17 changed files with 283 additions and 230 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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| {
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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| {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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| {
|
||||
|
|
|
|||
|
|
@ -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<T: Styled> {
|
||||
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<T: Styled> StyleSized<T> 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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
Loading…
Reference in a new issue