Add wiring for UI density (#11260)

Note: You shouldn't use the `unstable.ui_density` setting – it is only
being added for testing and to enable new UI components to be built with
density in mind. Don't expect this to work well, or at all right now.

Adds some of the basic wiring we'll need to start scaling UI elements
throughout the app based on a desired density setting.

Release Notes:

- N/A

crates/ui/src/components/button/button.rs

@@ -1,6 +1,6 @@
 use gpui::{AnyView, DefiniteLength};
 
-use crate::{prelude::*, IconPosition, KeyBinding};
+use crate::{prelude::*, IconPosition, KeyBinding, Spacing};
 use crate::{
     ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize, Label, LineHeightStyle,
 };
@@ -344,7 +344,7 @@ impl ButtonCommon for Button {
 
 impl RenderOnce for Button {
     #[allow(refining_impl_trait)]
-    fn render(self, _cx: &mut WindowContext) -> ButtonLike {
+    fn render(self, cx: &mut WindowContext) -> ButtonLike {
         let is_disabled = self.base.disabled;
         let is_selected = self.base.selected;
 
@@ -363,7 +363,7 @@ impl RenderOnce for Button {
 
         self.base.child(
             h_flex()
-                .gap_1()
+                .gap(Spacing::Small.rems(cx))
                 .when(self.icon_position == Some(IconPosition::Start), |this| {
                     this.children(self.icon.map(|icon| {
                         ButtonIcon::new(icon)
@@ -376,7 +376,7 @@ impl RenderOnce for Button {
                 })
                 .child(
                     h_flex()
-                        .gap_2()
+                        .gap(Spacing::Medium.rems(cx))
                         .justify_between()
                         .child(
                             Label::new(label)

crates/ui/src/components/button/button_like.rs

@@ -2,7 +2,7 @@ use gpui::{relative, DefiniteLength, MouseButton};
 use gpui::{transparent_black, AnyElement, AnyView, ClickEvent, Hsla, Rems};
 use smallvec::SmallVec;
 
-use crate::prelude::*;
+use crate::{prelude::*, Spacing};
 
 /// A trait for buttons that can be Selected. Enables setting the [`ButtonStyle`] of a button when it is selected.
 pub trait SelectableButton: Selectable {
@@ -431,10 +431,10 @@ impl RenderOnce for ButtonLike {
                 ButtonLikeRounding::Left => this.rounded_l_md(),
                 ButtonLikeRounding::Right => this.rounded_r_md(),
             })
-            .gap_1()
+            .gap(Spacing::Small.rems(cx))
             .map(|this| match self.size {
-                ButtonSize::Large => this.px_2(),
-                ButtonSize::Default | ButtonSize::Compact => this.px_1(),
+                ButtonSize::Large => this.px(Spacing::Medium.rems(cx)),
+                ButtonSize::Default | ButtonSize::Compact => this.px(Spacing::Small.rems(cx)),
                 ButtonSize::None => this,
             })
             .bg(style.enabled(cx).background)

crates/ui/src/components/button/icon_button.rs

@@ -1,6 +1,6 @@
 use gpui::{AnyView, DefiniteLength};
 
-use crate::{prelude::*, SelectableButton};
+use crate::{prelude::*, SelectableButton, Spacing};
 use crate::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize};
 
 use super::button_icon::ButtonIcon;
@@ -139,10 +139,10 @@ impl RenderOnce for IconButton {
                 IconButtonShape::Square => {
                     let icon_size = self.icon_size.rems() * cx.rem_size();
                     let padding = match self.icon_size {
-                        IconSize::Indicator => px(0.),
-                        IconSize::XSmall => px(0.),
-                        IconSize::Small => px(2.),
-                        IconSize::Medium => px(2.),
+                        IconSize::Indicator => Spacing::None.px(cx),
+                        IconSize::XSmall => Spacing::None.px(cx),
+                        IconSize::Small => Spacing::XSmall.px(cx),
+                        IconSize::Medium => Spacing::XSmall.px(cx),
                     };
 
                     this.width((icon_size + padding * 2.).into())