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

Jason Lee created 

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"
/>

Change summary

crates/component/src/component_layout.rs |  2 
crates/editor/src/editor.rs              |  4 +-
crates/editor/src/element.rs             |  2 
crates/gpui/examples/shadow.rs           |  4 ++
crates/gpui_macros/src/styles.rs         | 42 ++++++++++++++++++++++++-
crates/repl/src/notebook/cell.rs         |  2 
6 files changed, 49 insertions(+), 7 deletions(-)

Detailed changes

crates/editor/src/editor.rs 🔗 

@@ -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();

crates/editor/src/element.rs 🔗 

@@ -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();

crates/gpui/examples/shadow.rs 🔗 

@@ -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

crates/gpui_macros/src/styles.rs 🔗 

@@ -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.),

crates/repl/src/notebook/cell.rs 🔗 

@@ -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)
                                     },
                                 ))),