input: Change to input text size to smaller. (#1703)

Use `text_sm` for text size for Input.

Ref https://ui.shadcn.com/docs/components/input

## Screenshot

## Before

<img width="1143" height="1034" alt="image"
src="https://github.com/user-attachments/assets/17a8731e-9977-4beb-89d0-e2460f3823fd"
/>

## After

<img width="1218" height="974" alt="image"
src="https://github.com/user-attachments/assets/cca684d0-c86b-440f-bd30-cff7a4f444c4"
/>

crates/story/src/main.rs

@@ -218,6 +218,7 @@ impl Render for Gallery {
                                         div()
                                             .bg(cx.theme().sidebar_accent)
                                             .rounded_full()
+                                            .px_1()
                                             .when(cx.theme().radius.is_zero(), |this| {
                                                 this.rounded(px(0.))
                                             })

crates/story/src/textarea_story.rs

@@ -87,7 +87,17 @@ impl TextareaStory {
             InputState::new(window, cx)
                 .auto_grow(1, 5)
                 .placeholder("Enter text here...")
-                .default_value("Hello 世界, this is a very long line of text to test if the horizontal scrolling function is working properly, and it should not wrap automatically but display a horizontal scrollbar.\nThe second line is also very long text, used to test the horizontal scrolling effect under multiple lines, and you can input more content to test.\nThe third line: Here you can input other long text content that requires horizontal scrolling.\n")
+                .default_value(
+                    "Hello 世界 this is a very long line of text \
+                    to test if the horizontal scrolling function is working \
+                    properly, and it should not wrap automatically but display \
+                    a horizontal scrollbar.\n\
+                    The second line is also very long text, used to test the \
+                    horizontal scrolling effect under multiple lines, and you \
+                    can input more content to test.\nThe third line: Here you \
+                    can input other long text content that requires \
+                    horizontal scrolling.\n",
+                )
         });
 
         let textarea_auto_grow_no_wrap = cx.new(|cx| {

crates/ui/src/button/button.rs

@@ -1,14 +1,14 @@
 use std::rc::Rc;
 
 use crate::{
-    h_flex, spinner::Spinner, tooltip::Tooltip, ActiveTheme, Colorize as _, Disableable,
+    ActiveTheme, Colorize as _, Disableable, FocusableExt as _, Icon, IconName, Selectable,
-    FocusableExt as _, Icon, IconName, Selectable, Sizable, Size, StyleSized, StyledExt,
+    Sizable, Size, StyleSized, StyledExt, h_flex, spinner::Spinner, tooltip::Tooltip,
 };
 use gpui::{
-    div, prelude::FluentBuilder as _, px, relative, Action, AnyElement, App, ClickEvent, Corners,
+    Action, AnyElement, App, ClickEvent, Corners, Div, Edges, ElementId, Hsla, InteractiveElement,
-    Div, Edges, ElementId, Hsla, InteractiveElement, Interactivity, IntoElement, MouseButton,
+    Interactivity, IntoElement, MouseButton, ParentElement, Pixels, RenderOnce, SharedString,
-    ParentElement, Pixels, RenderOnce, SharedString, Stateful, StatefulInteractiveElement as _,
+    Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled, Window, div,
-    StyleRefinement, Styled, Window,
+    prelude::FluentBuilder as _, px, relative,
 };
 
 #[derive(Default, Clone, Copy)]

crates/ui/src/input/input.rs

@@ -2,7 +2,7 @@ use gpui::prelude::FluentBuilder as _;
 use gpui::{
     AnyElement, App, DefiniteLength, Edges, EdgesRefinement, Entity, InteractiveElement as _,
     IntoElement, IsZero, MouseButton, ParentElement as _, Rems, RenderOnce, StyleRefinement,
-    Styled, Window, div, px, relative,
+    Styled, Window, div, px, relative, rems,
 };
 
 use crate::button::{Button, ButtonVariants as _};
@@ -242,7 +242,11 @@ impl RenderOnce for Input {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         const LINE_HEIGHT: Rems = Rems(1.25);
         let font = window.text_style().font();
-        let font_size = window.text_style().font_size.to_pixels(window.rem_size());
+        let font_size = match self.size {
+            Size::Large => rems(1.),
+            _ => rems(0.875),
+        }
+        .to_pixels(window.rem_size());
 
         self.state.update(cx, |state, cx| {
             state.text_wrapper.set_font(font, font_size, cx);
@@ -255,7 +259,7 @@ impl RenderOnce for Input {
         let gap_x = match self.size {
             Size::Small => px(4.),
             Size::Large => px(8.),
-            _ => px(4.),
+            _ => px(6.),
         };
 
         let bg = if state.disabled {
@@ -397,7 +401,7 @@ impl RenderOnce for Input {
                 this.child(self.state.clone())
             })
             .when(has_suffix, |this| {
-                this.pr(self.size.input_px() / 2.).child(
+                this.pr(self.size.input_px()).child(
                     h_flex()
                         .id("suffix")
                         .gap(gap_x)

crates/ui/src/input/number_input.rs

@@ -1,11 +1,11 @@
 use gpui::{
-    actions, prelude::FluentBuilder as _, AnyElement, App, Context, Corners, Edges, Entity,
+    AnyElement, App, Context, Corners, Edges, Entity, EventEmitter, FocusHandle, Focusable,
-    EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyBinding,
+    InteractiveElement, IntoElement, KeyBinding, ParentElement, RenderOnce, SharedString,
-    ParentElement, RenderOnce, SharedString, StyleRefinement, Styled, Window,
+    StyleRefinement, Styled, Window, actions, prelude::FluentBuilder as _,
 };
 
 use crate::{
-    button::Button, h_flex, ActiveTheme, Disableable, IconName, Sizable, Size, StyledExt as _,
+    ActiveTheme, Disableable, IconName, Sizable, Size, StyledExt as _, button::Button, h_flex,
 };
 
 use super::{Input, InputState};
@@ -153,7 +153,7 @@ impl RenderOnce for NumberInput {
             .refine_style(&self.style)
             .when(self.disabled, |this| this.bg(cx.theme().muted))
             .child(
-                Button::new("-")
+                Button::new("minus")
                     .outline()
                     .with_size(self.size)
                     .icon(IconName::Minus)
@@ -191,7 +191,7 @@ impl RenderOnce for NumberInput {
                     .when_some(self.suffix, |this, suffix| this.suffix(suffix)),
             )
             .child(
-                Button::new("+")
+                Button::new("plus")
                     .outline()
                     .with_size(self.size)
                     .icon(IconName::Plus)

crates/ui/src/input/otp_input.rs

@@ -1,12 +1,12 @@
 use gpui::{
-    div, prelude::FluentBuilder, px, AnyElement, App, AppContext as _, Context, Empty, Entity,
+    AnyElement, App, AppContext as _, Context, Empty, Entity, EventEmitter, FocusHandle, Focusable,
-    EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyDownEvent,
+    InteractiveElement, IntoElement, KeyDownEvent, MouseButton, MouseDownEvent, ParentElement as _,
-    MouseButton, MouseDownEvent, ParentElement as _, Render, RenderOnce, SharedString, Styled as _,
+    Render, RenderOnce, SharedString, Styled as _, Subscription, Window, div,
-    Subscription, Window,
+    prelude::FluentBuilder, px,
 };
 
-use super::{blink_cursor::BlinkCursor, InputEvent};
+use super::{InputEvent, blink_cursor::BlinkCursor};
-use crate::{h_flex, v_flex, ActiveTheme, Disableable, Icon, IconName, Sizable, Size};
+use crate::{ActiveTheme, Disableable, Icon, IconName, Sizable, Size, h_flex, v_flex};
 
 pub struct OtpState {
     focus_handle: FocusHandle,
@@ -299,7 +299,7 @@ impl RenderOnce for OtpInput {
                                     .h_4()
                                     .w_0()
                                     .border_l_3()
-                                    .border_color(crate::blue_500()),
+                                    .border_color(cx.theme().caret),
                             )
                         }),
                     })

crates/ui/src/styled.rs

@@ -338,9 +338,9 @@ impl Size {
     /// Returns the horizontal input padding.
     pub fn input_px(&self) -> Pixels {
         match self {
-            Self::Large => px(20.),
+            Self::Large => px(16.),
             Self::Medium => px(12.),
-            Self::Small => px(8.),
+            Self::Small => px(6.),
             Self::XSmall => px(4.),
             _ => px(8.),
         }
@@ -350,7 +350,7 @@ impl Size {
     pub fn input_py(&self) -> Pixels {
         match self {
             Size::Large => px(10.),
-            Size::Medium => px(5.),
+            Size::Medium => px(8.),
             Size::Small => px(2.),
             Size::XSmall => px(0.),
             _ => px(2.),
@@ -473,9 +473,9 @@ impl<T: Styled> StyleSized<T> for T {
         match size {
             Size::Large => self.h_11(),
             Size::Medium => self.h_8(),
-            Size::Small => self.h(px(24.)),
+            Size::Small => self.h_6(),
-            Size::XSmall => self.h(px(20.)),
+            Size::XSmall => self.h_5(),
-            _ => self.h(px(24.)),
+            _ => self.h_6(),
         }
         .input_text_size(size)
     }