Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpui: Add shadow_xs, shadow_2xs and fix shadow values to match Tailwind CSS (#33361)

Browse source 
Release Notes:

- N/A

---

https://tailwindcss.com/docs/box-shadow

| name | value |
| -- | -- |
| shadow-2xs | box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05)
*/ |
| shadow-xs | box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 /
0.05) */ |
| shadow-sm | box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 /
0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */ |
| shadow-md | box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0
/ 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */ |
| shadow-lg | box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0
0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */ |
| shadow-xl | box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0
0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */ |
| shadow-2xl | box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0
0 0 / 0.25) */ |

## Before

<img width="1112" alt="SCR-20250625-nnxn"
src="https://github.com/user-attachments/assets/3bd44938-5de8-4d67-b323-c444b023a4b6"
/>

## After

<img width="1112" alt="SCR-20250625-nnrt"
src="https://github.com/user-attachments/assets/a5bf2401-f808-4712-9cc6-299f530f9165"
/>
This commit is contained in:
Jason Lee 2025-07-03 20:50:26 +08:00 • committed by GitHub
parent 2bf2c5c580
commit f34a7abf17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 49 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/component/src/component_layout.rs
View file

@ -61,7 +61,7 @@ impl RenderOnce for ComponentExample {
12.0,
12.0,
))
.shadow_sm()
.shadow_xs()
.child(self.element),
)
.into_any_element()

4
crates/editor/src/editor.rs
View file

@ -8715,7 +8715,7 @@ impl Editor {
h_flex()
.bg(cx.theme().colors().editor_background)
.border(BORDER_WIDTH)
.shadow_sm()
.shadow_xs()
.border_color(cx.theme().colors().border)
.rounded_l_lg()
.when(line_count > 1, |el| el.rounded_br_lg())
@ -8915,7 +8915,7 @@ impl Editor {
.border_1()
.bg(Self::edit_prediction_line_popover_bg_color(cx))
.border_color(Self::edit_prediction_callout_popover_border_color(cx))
.shadow_sm()
.shadow_xs()
.when(!has_keybind, |el| {
let status_colors = cx.theme().status();

2
crates/editor/src/element.rs
View file

@ -1875,7 +1875,7 @@ impl EditorElement {
let mut minimap = div()
.size_full()
.shadow_sm()
.shadow_xs()
.px(PADDING_OFFSET)
.child(minimap_editor)
.into_any_element();

4
crates/gpui/examples/shadow.rs
View file

@ -156,6 +156,10 @@ impl Render for Shadow {
.w_full()
.children(vec![
example("None", Shadow::base()),
// 2Xsmall shadow
example("2X Small", Shadow::base().shadow_2xs()),
// Xsmall shadow
example("Extra Small", Shadow::base().shadow_xs()),
// Small shadow
example("Small", Shadow::base().shadow_sm()),
// Medium shadow

42
crates/gpui_macros/src/styles.rs
View file

@ -407,7 +407,22 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
/// Sets the box shadow of the element.
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_sm(mut self) -> Self {
#visibility fn shadow_2xs(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use std::vec;
self.style().box_shadow = Some(vec![BoxShadow {
color: hsla(0., 0., 0., 0.05),
offset: point(px(0.), px(1.)),
blur_radius: px(0.),
spread_radius: px(0.),
}]);
self
}
/// Sets the box shadow of the element.
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_xs(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use std::vec;
@ -420,6 +435,29 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
self
}
/// Sets the box shadow of the element.
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_sm(mut self) -> Self {
use gpui::{BoxShadow, hsla, point, px};
use std::vec;
self.style().box_shadow = Some(vec![
BoxShadow {
color: hsla(0., 0., 0., 0.1),
offset: point(px(0.), px(1.)),
blur_radius: px(3.),
spread_radius: px(0.),
},
BoxShadow {
color: hsla(0., 0., 0., 0.1),
offset: point(px(0.), px(1.)),
blur_radius: px(2.),
spread_radius: px(-1.),
}
]);
self
}
/// Sets the box shadow of the element.
/// [Docs](https://tailwindcss.com/docs/box-shadow)
#visibility fn shadow_md(mut self) -> Self {
@ -428,7 +466,7 @@ pub fn box_shadow_style_methods(input: TokenStream) -> TokenStream {
self.style().box_shadow = Some(vec![
BoxShadow {
color: hsla(0.5, 0., 0., 0.1),
color: hsla(0., 0., 0., 0.1),
offset: point(px(0.), px(4.)),
blur_radius: px(6.),
spread_radius: px(-1.),

2
crates/repl/src/notebook/cell.rs
View file

@ -656,7 +656,7 @@ impl Render for CodeCell {
// .bg(cx.theme().colors().editor_background)
// .border(px(1.))
// .border_color(cx.theme().colors().border)
// .shadow_sm()
// .shadow_xs()
.children(content)
},
))),