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

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