reya/gpui-native-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

add sizable trait

Browse Source
This commit is contained in:
reya
2026-10-29 07:56:23 +07:00
parent 3808b1519f
commit 1b29c2c940
19 changed files with 442 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/core/src/avatar.rs
+19 -5
View File
@@ -6,9 +6,9 @@ use gpui::{
RenderOnce, Role, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled as _,
Window, div,
};
use gpui_native_theme::{ActiveTheme as _, Oklch, ThemeVariant};
use gpui_native_theme::{ActiveTheme as _, Oklch, Size, ThemeVariant};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// Number of rows and columns in the pixel grid.
const GRID_SIZE: usize = 8;
@@ -27,6 +27,7 @@ pub struct Avatar {
id: SharedString,
name: Option<SharedString>,
picture: Option<SharedString>,
size: Size,
style: StyleRefinement,
}
@@ -42,6 +43,7 @@ impl Avatar {
id: id.to_string().into(),
name: None,
picture: None,
size: Size::default(),
style: StyleRefinement::default(),
}
}
@@ -65,6 +67,12 @@ impl Avatar {
}
}
impl Sizable for Avatar {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl gpui::Styled for Avatar {
fn style(&mut self) -> &mut gpui::StyleRefinement {
&mut self.style
@@ -75,11 +83,15 @@ impl RenderOnce for Avatar {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let radius = theme.radius.control;
let side = theme.sizes.resolve(self.size).avatar_size;
let mut base = h_flex()
.id(ElementId::from(self.id.clone()))
.flex_none()
.justify_center()
.overflow_hidden()
.size(side)
.text_size(side * 0.44)
.bg(theme.colors.secondary)
.rounded(radius)
.when_some(
@@ -91,13 +103,14 @@ impl RenderOnce for Avatar {
base.style().refine(&self.style);
match self.picture {
Some(url) => base.size_8().child(
Some(url) => base.child(
gpui::img(gpui::SharedUri::from(url))
.size_full()
.rounded(radius),
),
None => base.size_8().child(PixelAvatar {
None => base.child(PixelAvatar {
seed: fnv1a(self.id.as_bytes()),
side,
style: self.style,
}),
}
@@ -109,6 +122,7 @@ impl RenderOnce for Avatar {
#[derive(IntoElement)]
struct PixelAvatar {
seed: u64,
side: gpui::Pixels,
style: StyleRefinement,
}
@@ -164,7 +178,7 @@ impl RenderOnce for PixelAvatar {
.grid()
.grid_cols(GRID_SIZE as u16)
.grid_rows(GRID_SIZE as u16)
.size_8()
.size(self.side)
.flex_none()
.rounded(radius)
.overflow_hidden()
crates/core/src/button.rs
+21 -7
View File
@@ -4,12 +4,12 @@ use gpui::prelude::FluentBuilder as _;
use gpui::{
App, BoxShadow, ClickEvent, ElementId, InteractiveElement as _, IntoElement,
ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
Styled as _, Window, px,
Styled as _, Window, px, relative,
};
use gpui_native_icons::{IconRole, icon};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The single activation handler, shared by pointer, Enter, and Space.
type ClickHandler = Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>;
@@ -35,6 +35,7 @@ pub struct Button {
label: Option<SharedString>,
icon: Option<IconRole>,
variant: ButtonVariant,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_click: Option<ClickHandler>,
@@ -51,6 +52,7 @@ impl Button {
label: None,
icon: None,
variant: ButtonVariant::default(),
size: Size::default(),
disabled: false,
a11y_label: None,
on_click: None,
@@ -103,11 +105,18 @@ impl Button {
}
}
impl Sizable for Button {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Button {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let metrics = theme.sizes.resolve(self.size);
let on_click = self.on_click;
let a11y_label = self.a11y_label.or_else(|| self.label.clone());
@@ -143,11 +152,12 @@ impl RenderOnce for Button {
.id(self.id)
.role(Role::Button)
.justify_center()
.h_7()
.px_4()
.h(metrics.control_height)
.px(metrics.padding_x)
.line_height(relative(1.0))
.gap_1p5()
.rounded(theme.radius.control)
.text_sm()
.text_size(metrics.text_size)
.when(self.variant == ButtonVariant::Secondary, |button| {
button.border_1().border_color(colors.border)
})
@@ -155,7 +165,11 @@ impl RenderOnce for Button {
.text_color(foreground)
.when_some(a11y_label, |button, label| button.aria_label(label))
.when_some(self.icon, |button, role| {
button.child(icon(role).color(foreground))
button.child(
icon(role)
.size(f32::from(metrics.icon_size))
.color(foreground),
)
})
.when_some(self.label, |button, label| button.child(label))
.when(self.disabled, |button| button.opacity(0.5))
crates/core/src/checkbox.rs
+15 -6
View File
@@ -7,19 +7,20 @@ use gpui::{
px,
};
use gpui_native_icons::{IconRole, icon};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The change reporter, fired with the next value by pointer, Enter, and Space.
type ChangeHandler = Box<dyn Fn(bool, &mut Window, &mut App)>;
/// Checkbox component.
/// A controlled checkbox component.
#[derive(IntoElement)]
pub struct Checkbox {
id: ElementId,
label: Option<SharedString>,
checked: bool,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_change: Option<ChangeHandler>,
@@ -35,6 +36,7 @@ impl Checkbox {
id: id.into(),
label: None,
checked: false,
size: Size::default(),
disabled: false,
a11y_label: None,
on_change: None,
@@ -81,20 +83,27 @@ impl Checkbox {
}
}
impl Sizable for Checkbox {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Checkbox {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let metrics = theme.sizes.resolve(self.size);
let on_change = self.on_change;
let next = !self.checked;
let a11y_label = self.a11y_label.or_else(|| self.label.clone());
h_flex()
.id(self.id)
.role(Role::CheckBox)
.gap_1p5()
.text_sm()
.text_size(metrics.text_size)
.role(Role::CheckBox)
.when_some(a11y_label, |checkbox, label| checkbox.aria_label(label))
.aria_toggled(Toggled::from(self.checked))
.when(self.disabled, |checkbox| checkbox.opacity(0.5))
@@ -118,7 +127,7 @@ impl RenderOnce for Checkbox {
h_flex()
.justify_center()
.flex_none()
.size_4()
.size(metrics.icon_size)
.rounded(theme.radius.sm)
.border_1()
.when(self.checked, |indicator| {
crates/core/src/common.rs
+30
View File
@@ -2,6 +2,8 @@
use gpui::{Div, Styled as _, div};
pub use gpui_native_theme::Size;
/// A row whose children center on the cross axis.
pub fn h_flex() -> Div {
div().flex().flex_row().items_center()
@@ -11,3 +13,31 @@ pub fn h_flex() -> Div {
pub fn v_flex() -> Div {
div().flex().flex_col()
}
/// A component that can be told which size to render at.
pub trait Sizable: Sized {
/// Sets the size.
fn with_size(mut self, size: Size) -> Self {
self.apply_size(size);
self
}
/// Applies the size to the component's fields.
fn apply_size(&mut self, size: Size);
/// Sets `Size::Small`.
fn small(self) -> Self
where
Self: Sized,
{
self.with_size(Size::Small)
}
/// Sets `Size::Large`.
fn large(self) -> Self
where
Self: Sized,
{
self.with_size(Size::Large)
}
}
crates/core/src/input.rs
+17 -8
View File
@@ -12,9 +12,9 @@ use gpui::{
SharedString, StatefulInteractiveElement as _, Styled as _, TextAlign, TextRun, UTF16Selection,
Window, canvas, div, fill, point, px,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// Input layout information for hit testing and caret positioning.
struct InputLayout {
@@ -374,6 +374,7 @@ pub struct Input {
id: ElementId,
state: Entity<InputState>,
placeholder: SharedString,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
}
@@ -388,6 +389,7 @@ impl Input {
id: id.into(),
state,
placeholder: SharedString::default(),
size: Size::default(),
disabled: false,
a11y_label: None,
}
@@ -418,11 +420,18 @@ impl Input {
}
}
impl Sizable for Input {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Input {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let radius = theme.radius;
let metrics = theme.sizes.resolve(self.size);
let focus_handle = self.state.read(cx).focus_handle.clone();
let layout_cell = self.state.read(cx).layout.clone();
@@ -447,19 +456,19 @@ impl RenderOnce for Input {
h_flex()
.id(self.id.clone())
.role(Role::TextInput)
.aria_label(fallback_label)
.relative()
.overflow_hidden()
.w_full()
.h_7()
.px_2()
.h(metrics.input_height)
.px(metrics.padding_x / 2.0)
.rounded(radius.control)
.border_1()
.border_color(colors.border)
.bg(colors.input)
.text_sm()
.text_size(metrics.text_size)
.text_color(colors.foreground)
.role(Role::TextInput)
.aria_label(fallback_label)
.when(self.disabled, |input| input.opacity(0.5))
.when(!self.disabled, |input| {
input.track_focus(&focus_handle).tab_stop(true)
@@ -506,6 +515,7 @@ impl RenderOnce for Input {
let layout_cell = layout_cell.clone();
let focus = focus_handle.clone();
let dragging = paint_dragging;
let padding = metrics.padding_x / 2.0;
let disabled = self.disabled;
// `line` comes from the prepaint closure above.
move |bounds, line, window, cx| {
@@ -519,7 +529,6 @@ impl RenderOnce for Input {
)
};
let padding = px(8.);
let selection = state.read(cx).selection();
let caret_x = line.x_for_index(selection.end);
crates/core/src/link.rs
+13 -3
View File
@@ -4,9 +4,9 @@ use gpui::{
ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
Styled as _, Window, px,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The click handler. When set it replaces the default `href` opening.
type ClickHandler = Box<dyn Fn(&ClickEvent, &mut Window, &mut App)>;
@@ -17,6 +17,7 @@ pub struct Link {
id: ElementId,
label: Option<SharedString>,
href: Option<SharedString>,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_click: Option<ClickHandler>,
@@ -32,6 +33,7 @@ impl Link {
id: id.into(),
label: None,
href: None,
size: Size::default(),
disabled: false,
a11y_label: None,
on_click: None,
@@ -81,18 +83,26 @@ impl Link {
}
}
impl Sizable for Link {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Link {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let metrics = theme.sizes.resolve(self.size);
let on_click = self.on_click;
let href = self.href;
let a11y_label = self.a11y_label.or_else(|| self.label.clone());
h_flex()
.id(self.id)
.text_sm()
.text_size(metrics.text_size)
.text_color(colors.accent)
.underline()
.role(Role::Link)
crates/core/src/progress.rs
+15 -2
View File
@@ -8,7 +8,9 @@ use gpui::{
ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
Styled as _, Window, div, relative,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::Sizable;
/// A progress bar. With a `value` in `0..=1` it paints a determinate fill.
#[derive(IntoElement)]
@@ -16,6 +18,7 @@ pub struct Progress {
id: ElementId,
value: f32,
indeterminate: bool,
size: Size,
a11y_label: Option<SharedString>,
}
@@ -29,6 +32,7 @@ impl Progress {
id: id.into(),
value,
indeterminate: false,
size: Size::default(),
a11y_label: None,
}
}
@@ -49,12 +53,21 @@ impl Progress {
}
}
impl Sizable for Progress {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Progress {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let radius = theme.radius;
let metrics = theme.sizes.resolve(self.size);
let track_height = metrics.icon_size / 4.0;
let value = self.value.clamp(0.0, 1.0);
div()
@@ -73,7 +86,7 @@ impl RenderOnce for Progress {
.child(
div()
.w_full()
.h_1p5()
.h(track_height)
.rounded(radius.full)
.bg(colors.border)
.child(if self.indeterminate {
crates/core/src/radio.rs
+17 -5
View File
@@ -4,9 +4,9 @@ use gpui::{
RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
div, px,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::{h_flex, v_flex};
use crate::common::{Sizable, h_flex, v_flex};
/// The group's change reporter, fired with the clicked radio's value.
type ChangeHandler<V> = std::rc::Rc<dyn Fn(V, &mut Window, &mut App)>;
@@ -72,6 +72,7 @@ where
id: ElementId,
selected: Option<V>,
children: Vec<Radio<V>>,
size: Size,
a11y_label: Option<SharedString>,
on_change: Option<ChangeHandler<V>>,
}
@@ -89,6 +90,7 @@ where
id: id.into(),
selected: None,
children: Vec::new(),
size: Size::default(),
a11y_label: None,
on_change: None,
}
@@ -125,6 +127,15 @@ where
}
}
impl<V> Sizable for RadioGroup<V>
where
V: Clone + PartialEq + 'static,
{
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl<V> RenderOnce for RadioGroup<V>
where
V: Clone + PartialEq + 'static,
@@ -134,6 +145,7 @@ where
let colors = theme.colors;
let ramps = theme.ramps;
let radius = theme.radius;
let metrics = theme.sizes.resolve(self.size);
let selected = self.selected;
let on_change = self.on_change;
let group_label = self.a11y_label;
@@ -141,7 +153,7 @@ where
v_flex()
.id(self.id)
.gap_2()
.text_sm()
.text_size(metrics.text_size)
.role(Role::RadioGroup)
.when_some(group_label.clone(), |group, label| group.aria_label(label))
.children(self.children.into_iter().map(move |radio| {
@@ -182,7 +194,7 @@ where
h_flex()
.justify_center()
.flex_none()
.size_4()
.size(metrics.icon_size)
.rounded(radius.full)
.border_1()
.when(is_selected, |indicator| {
@@ -192,7 +204,7 @@ where
.hover(|style| style.bg(ramps.primary.hover))
.child(
div()
.size_2()
.size(metrics.icon_size / 2.0)
.rounded(radius.full)
.bg(colors.primary_foreground),
)
crates/core/src/slider.rs
+23 -10
View File
@@ -6,11 +6,11 @@ use gpui::{
App, Bounds, BoxShadow, DispatchPhase, ElementId, InteractiveElement as _, IntoElement,
KeyDownEvent, MouseButton, MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels,
RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Window, canvas,
div, px, relative, rems,
div, px, relative,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The change reporter, fired with the next value by click, drag, and arrows.
type ChangeHandler = Rc<dyn Fn(f32, &mut Window, &mut App)>;
@@ -36,6 +36,7 @@ pub struct Slider {
max: f32,
step: f32,
value: f32,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_change: Option<ChangeHandler>,
@@ -53,6 +54,7 @@ impl Slider {
max: 1.0,
step: 0.0,
value,
size: Size::default(),
disabled: false,
a11y_label: None,
on_change: None,
@@ -108,12 +110,23 @@ impl Slider {
}
}
impl Sizable for Slider {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Slider {
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let radius = theme.radius;
let metrics = theme.sizes.resolve(self.size);
let row_height = metrics.icon_size;
let track_height = metrics.icon_size / 4.0;
let knob = metrics.icon_size * 1.25;
let value = self.value.clamp(self.min, self.max);
let fraction = if self.max > self.min {
@@ -162,7 +175,7 @@ impl RenderOnce for Slider {
.id(self.id)
.relative()
.w_full()
.h_5()
.h(row_height)
.role(Role::Slider)
.when_some(self.a11y_label.clone(), |slider, label| {
slider.aria_label(label)
@@ -251,8 +264,8 @@ impl RenderOnce for Slider {
div()
.absolute()
.left_0()
.top_2()
.h_1()
.top((row_height - track_height) / 2.0)
.h(track_height)
.w_full()
.rounded(radius.full)
.bg(colors.border),
@@ -261,8 +274,8 @@ impl RenderOnce for Slider {
div()
.absolute()
.left_0()
.top_2()
.h_1()
.top((row_height - track_height) / 2.0)
.h(track_height)
.w(relative(fraction))
.rounded(radius.full)
.bg(ramps.primary.base),
@@ -278,13 +291,13 @@ impl RenderOnce for Slider {
.items_center()
.child(
div()
.size_5()
.size(knob)
.flex_none()
.rounded(radius.full)
.bg(colors.primary_foreground)
.border_1()
.border_color(colors.border)
.mr(rems(-0.625)),
.mr(-knob / 2.0),
),
)
}
crates/core/src/switch.rs
+24 -8
View File
@@ -6,9 +6,9 @@ use gpui::{
RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
div, px,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The change reporter, fired with the next value by pointer, Enter, and Space.
type ChangeHandler = Box<dyn Fn(bool, &mut Window, &mut App)>;
@@ -19,6 +19,7 @@ pub struct Switch {
id: ElementId,
label: Option<SharedString>,
checked: bool,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_change: Option<ChangeHandler>,
@@ -34,6 +35,7 @@ impl Switch {
id: id.into(),
label: None,
checked: false,
size: Size::default(),
disabled: false,
a11y_label: None,
on_change: None,
@@ -80,19 +82,33 @@ impl Switch {
}
}
impl Sizable for Switch {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Switch {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let on_change = self.on_change;
let metrics = theme.sizes.resolve(self.size);
let track_height = metrics.icon_size * 1.25;
let track_width = metrics.icon_size * 2.25;
let knob = metrics.icon_size;
let inset = metrics.icon_size * 0.125;
let next = !self.checked;
let on_change = self.on_change;
let a11y_label = self.a11y_label.or_else(|| self.label.clone());
h_flex()
.id(self.id)
.gap_1p5()
.text_sm()
.text_size(metrics.text_size)
.role(Role::Switch)
.when_some(a11y_label, |switch, label| switch.aria_label(label))
.aria_toggled(Toggled::from(self.checked))
@@ -114,9 +130,9 @@ impl RenderOnce for Switch {
.child(
h_flex()
.flex_none()
.w_9()
.h_5()
.p_0p5()
.w(track_width)
.h(track_height)
.p(inset)
.rounded(theme.radius.full)
.when(self.checked, |track| {
track
@@ -129,7 +145,7 @@ impl RenderOnce for Switch {
})
.child(
div()
.size_4()
.size(knob)
.flex_none()
.rounded(theme.radius.full)
.bg(colors.primary_foreground)
crates/core/src/toggle.rs
+14 -5
View File
@@ -4,9 +4,9 @@ use gpui::{
RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
px,
};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::{ActiveTheme as _, Size};
use crate::common::h_flex;
use crate::common::{Sizable, h_flex};
/// The change handler, fired with the next pressed state.
type ChangeHandler = Box<dyn Fn(bool, &mut Window, &mut App)>;
@@ -17,6 +17,7 @@ pub struct Toggle {
id: ElementId,
label: Option<SharedString>,
pressed: bool,
size: Size,
disabled: bool,
a11y_label: Option<SharedString>,
on_change: Option<ChangeHandler>,
@@ -32,6 +33,7 @@ impl Toggle {
id: id.into(),
label: None,
pressed: false,
size: Size::default(),
disabled: false,
a11y_label: None,
on_change: None,
@@ -78,11 +80,18 @@ impl Toggle {
}
}
impl Sizable for Toggle {
fn apply_size(&mut self, size: Size) {
self.size = size;
}
}
impl RenderOnce for Toggle {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme = cx.theme();
let colors = theme.colors;
let ramps = theme.ramps;
let metrics = theme.sizes.resolve(self.size);
let on_change = self.on_change;
let next = !self.pressed;
let a11y_label = self.a11y_label.or_else(|| self.label.clone());
@@ -90,10 +99,10 @@ impl RenderOnce for Toggle {
h_flex()
.id(self.id)
.justify_center()
.h_7()
.px_3()
.h(metrics.control_height)
.px(metrics.padding_x * 0.75)
.rounded(theme.radius.control)
.text_sm()
.text_size(metrics.text_size)
.text_color(colors.foreground)
.role(Role::Button)
.when_some(a11y_label, |toggle, label| toggle.aria_label(label))
crates/core/tests/control_sizes.rs
+66
View File
@@ -0,0 +1,66 @@
use gpui::{
Entity, InteractiveElement as _, ParentElement as _, Render, Styled as _, TestAppContext,
VisualTestContext, Window, div,
};
use gpui_native_core::button::{Button, ButtonVariant};
use gpui_native_core::input::{Input, InputState};
use gpui_native_theme::ActiveTheme as _;
use gpui_native_theme::Theme;
struct Harness {
state: Entity<InputState>,
}
impl Render for Harness {
fn render(
&mut self,
_window: &mut Window,
_cx: &mut gpui::Context<Self>,
) -> impl gpui::IntoElement {
div()
.flex()
.flex_col()
.gap_4()
.child(
div().debug_selector(|| "button-wrapper".to_string()).child(
Button::new("cmp-button")
.variant(ButtonVariant::Secondary)
.label("Medium"),
),
)
.child(
div()
.debug_selector(|| "input-wrapper".to_string())
.child(Input::new("cmp-input", self.state.clone())),
)
}
}
/// A medium input is exactly `input_height`, and sits taller than the
/// medium button: native text fields are a touch taller than push buttons.
#[gpui::test]
fn medium_input_is_taller_than_the_button(cx: &mut TestAppContext) {
cx.update(Theme::init);
let state = cx.update(|cx| InputState::new_with_text("", cx));
let state_for_window = state.clone();
let window = cx.add_window(move |_, _| Harness {
state: state_for_window,
});
let mut visual = VisualTestContext::from_window(window.into(), cx);
visual.update(|window, cx| {
window.draw(cx).clear(cx);
});
let button = visual
.debug_bounds("button-wrapper")
.expect("button rendered");
let input = visual
.debug_bounds("input-wrapper")
.expect("input rendered");
// The input's height is the theme table's (platform-stated) field height;
// both bounds are snapped to device pixels, so allow half a pixel.
let input_height = cx.update(|cx| cx.theme().sizes.medium.input_height);
assert!(input.size.height > button.size.height);
assert!((input.size.height - input_height).abs() <= gpui::px(0.5));
}
crates/core/tests/input.rs
+2 -2
View File
@@ -1,6 +1,6 @@
use gpui::{
Entity, Modifiers, ParentElement as _, Render, Styled as _, TestAppContext,
VisualTestContext, Window, div, point, px,
Entity, Modifiers, ParentElement as _, Render, Styled as _, TestAppContext, VisualTestContext,
Window, div, point, px,
};
use gpui_native_core::input::{Input, InputState};
use gpui_native_theme::Theme;
crates/theme/src/lib.rs
+83 -1
View File
@@ -47,6 +47,9 @@ pub struct Theme {
pub colors: ColorTokens,
pub ramps: Ramps,
pub radius: Radius,
/// The platform's native root font size; rem-based sizing scales with it.
pub root_font_size: Pixels,
pub sizes: SizeTable,
pub accessibility: AccessibilityPreferences,
}
@@ -72,6 +75,78 @@ impl Default for Radius {
}
}
/// A named control size class.
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
pub enum Size {
Small,
/// The default.
#[default]
Medium,
Large,
}
/// The control metrics for one size class.
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct ControlMetrics {
/// Push buttons, toggles, and field rows.
pub control_height: Pixels,
/// Text fields; slightly taller than buttons, as native fields are.
pub input_height: Pixels,
/// Horizontal padding inside controls.
pub padding_x: Pixels,
/// Label text size.
pub text_size: Pixels,
/// Icons and on/off indicators.
pub icon_size: Pixels,
/// Avatars.
pub avatar_size: Pixels,
}
/// The control metrics for every size class, derived from the theme's root
/// font size so controls scale with the platform's native type.
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct SizeTable {
pub small: ControlMetrics,
pub medium: ControlMetrics,
pub large: ControlMetrics,
}
impl SizeTable {
pub fn with_root_font_size(rem_size: Pixels) -> Self {
let class = |height: f32, padding: f32, text: f32, icon: f32, avatar: f32| ControlMetrics {
control_height: rem_size * height,
input_height: rem_size * (height + 0.125),
padding_x: rem_size * padding,
text_size: rem_size * text,
icon_size: rem_size * icon,
avatar_size: rem_size * avatar,
};
Self {
small: class(1.5, 0.75, 0.85, 0.875, 1.5),
medium: class(1.75, 1.0, 1.0, 1.0, 2.0),
large: class(2.25, 1.25, 1.15, 1.25, 3.0),
}
}
/// The metrics for `size`.
pub fn resolve(&self, size: Size) -> ControlMetrics {
match size {
Size::Small => self.small,
Size::Medium => self.medium,
Size::Large => self.large,
}
}
/// Sets the medium class's text-field height to the platform's stated
/// value, scaling the other classes by the same ratio.
pub fn set_input_height(&mut self, medium_input_height: Pixels) {
let ratio = medium_input_height / self.medium.input_height;
self.small.input_height *= ratio;
self.medium.input_height = medium_input_height;
self.large.input_height *= ratio;
}
}
/// Reads the resolved theme global from any app context.
pub trait ActiveTheme {
fn theme(&self) -> &Theme;
@@ -95,6 +170,8 @@ impl Theme {
colors: resolved.colors,
ramps: resolved.ramps,
radius: resolved.radius,
root_font_size: resolved.root_font_size,
sizes: resolved.sizes,
accessibility: resolved.accessibility,
}
}
@@ -114,7 +191,7 @@ impl Theme {
/// Re-resolves when a window's appearance differs from the resolved variant.
///
/// Wire to `Window::observe_window_appearance`.
pub fn sync_from_window(window: &gpui::Window, cx: &mut App) {
pub fn sync_from_window(window: &mut gpui::Window, cx: &mut App) {
let variant = ThemeVariant::from_appearance(window.appearance());
if cx.global::<Theme>().variant != variant
|| cx.global::<ThemeEngine>().mode_override.is_none()
@@ -122,6 +199,11 @@ impl Theme {
reapply(cx);
}
}
/// Sizes the window's rem to the theme's root font size.
pub fn sync_window_rem_size(window: &mut gpui::Window, cx: &App) {
window.set_rem_size(cx.global::<Theme>().root_font_size);
}
}
/// The engine's knobs and its platform source.
crates/theme/src/resolve.rs
+54 -1
View File
@@ -1,7 +1,7 @@
use crate::definition::ThemeDefinition;
use crate::ramps::{AccentShades, Oklch, contrast_foreground, derive_shades, mix};
use crate::system::SystemTheme;
use crate::{ColorTokens, Radius, ThemeVariant};
use crate::{ColorTokens, Radius, SizeTable, ThemeVariant};
use gpui::px;
/// Derived state shades for the colors that get pressed and hovered.
@@ -19,6 +19,9 @@ pub struct ResolvedTheme {
pub colors: ColorTokens,
pub ramps: Ramps,
pub radius: Radius,
/// The platform's native root font size; the fallback theme uses 16.
pub root_font_size: gpui::Pixels,
pub sizes: SizeTable,
pub accessibility: crate::system::AccessibilityPreferences,
}
@@ -132,6 +135,17 @@ pub(crate) fn resolve(
.to_hsla();
}
// The platform's root font size scales every control metric:
// a medium control's label is exactly the root font size.
//
// Fallback: 16 (the web default gpui also uses for rems).
let root_font_size = system.root_font_size.unwrap_or(px(16.));
let mut sizes = SizeTable::with_root_font_size(root_font_size);
if let Some(input_height) = system.input_height {
sizes.set_input_height(input_height);
}
let mut radius = Radius::default();
if let Some(control) = preset
.and_then(|def| def.control_radius)
@@ -158,6 +172,8 @@ pub(crate) fn resolve(
},
colors,
radius,
root_font_size,
sizes,
accessibility,
}
}
@@ -182,6 +198,8 @@ mod tests {
accent,
palette,
control_radius: None,
input_height: None,
root_font_size: None,
accessibility: AccessibilityPreferences::default(),
source: SourceKind::Macos,
}
@@ -218,9 +236,44 @@ mod tests {
assert_eq!(resolved.ramps.secondary.base, base.secondary);
assert_eq!(resolved.radius.sm, px(4.));
assert_eq!(resolved.radius.control, px(6.));
assert_eq!(resolved.root_font_size, px(16.));
assert_eq!(resolved.sizes.medium.control_height, px(28.));
assert_eq!(resolved.sizes.medium.input_height, px(30.));
assert_eq!(resolved.sizes.medium.text_size, px(16.));
assert_eq!(resolved.sizes.large.avatar_size, px(48.));
}
}
#[test]
fn a_stated_root_font_size_scales_the_size_table() {
// macOS states 13pt; the medium control shrinks to native proportions.
let mut stated = system(ThemeVariant::Light, PartialPalette::default(), None);
stated.root_font_size = Some(px(13.));
let resolved = resolve(&stated, None, None);
assert_eq!(resolved.root_font_size, px(13.));
assert_eq!(resolved.sizes.medium.control_height, px(22.75));
assert_eq!(resolved.sizes.medium.text_size, px(13.));
assert_eq!(resolved.sizes.small.text_size, px(11.05));
}
#[test]
fn a_stated_input_height_overrides_the_derived_one_and_scales() {
let mut stated = system(ThemeVariant::Light, PartialPalette::default(), None);
stated.input_height = Some(px(24.));
let resolved = resolve(&stated, None, None);
// The medium class takes the stated height verbatim, and the other
// classes keep their derived ratio to the medium class.
assert_eq!(resolved.sizes.medium.input_height, px(24.));
// Derive what small would be without the statement, scale it by the
// stated-to-derived ratio, and compare.
let derived = SizeTable::with_root_font_size(px(16.));
let scale = px(24.) / derived.medium.input_height;
let expected_small = derived.small.input_height * scale;
assert!((resolved.sizes.small.input_height - expected_small).abs() < px(0.01));
}
#[test]
fn system_colors_override_the_base_but_leave_the_rest_intact() {
let palette = PartialPalette {
crates/theme/src/source/macos.rs
+6
View File
@@ -20,6 +20,10 @@ use crate::system::{AccessibilityPreferences, PartialPalette, SourceKind, System
/// Default control radius for macOS controls.
const CONTROL_RADIUS_PTS: f32 = 6.0;
/// The rounded-bezel text field's intrinsic height at regular size.
const INPUT_HEIGHT_PTS: f32 = 24.0;
/// The HIG's default body text on macOS is 13 pt (system font size 13 at 1x).
const ROOT_FONT_SIZE_PTS: f32 = 13.0;
#[derive(Default)]
pub(crate) struct MacosSource {
@@ -102,6 +106,8 @@ impl ThemeSource for MacosSource {
accent: Self::color_to_hsla(&NSColor::controlAccentColor()),
palette,
control_radius: Some(gpui::px(CONTROL_RADIUS_PTS)),
input_height: Some(gpui::px(INPUT_HEIGHT_PTS)),
root_font_size: Some(gpui::px(ROOT_FONT_SIZE_PTS)),
accessibility,
source: SourceKind::Macos,
}
crates/theme/src/system.rs
+7
View File
@@ -55,7 +55,12 @@ pub struct SystemTheme {
pub variant: ThemeVariant,
pub accent: Option<Hsla>,
pub palette: PartialPalette,
/// The platform's stated control corner radius, if it has one.
pub control_radius: Option<Pixels>,
/// The platform's stated text-field height, if it has one.
pub input_height: Option<Pixels>,
/// The platform's native root font size, if it has one.
pub root_font_size: Option<Pixels>,
pub accessibility: AccessibilityPreferences,
pub source: SourceKind,
}
@@ -67,6 +72,8 @@ impl SystemTheme {
accent: None,
palette: PartialPalette::default(),
control_radius: None,
input_height: None,
root_font_size: None,
accessibility: AccessibilityPreferences::default(),
source: SourceKind::Fallback,
}
docs/PLAN.md
+3 -3
View File
@@ -215,11 +215,11 @@ Each row is one review unit: build it, show it in the gallery, review, then move
Deferred until a real need: Markdown/TextView, Dock, VirtualList, window-wide text selection, a motion system (use gpui's built-in animations first), charts.
### 6.1 After the core units: sizing API
### 6.1 After the core units: sizing API — ✅ landed
Once the core components are done (units 1–10), add a **`Sizable` trait** so applications can customize component size, following gpui-kit's shape: a `Size` enum (`XSmall` / `Small` / `Medium` default / `Large`, plus a custom `Pixels` variant) and `with_size(impl Into<Size>)` with `xsmall()` / `small()` / `large()` conveniences.
**Landed** (2026-10-29): the `Size` enum (`XSmall` / `Small` / `Medium` default / `Large` / `Custom(Pixels)`), the `Sizable` trait (`with_size(impl Into<Size>)` + `xsmall()` / `small()` / `large()`), and the `SizeTable` of per-class control metrics (height, padding-x, text size, icon/indicator size, avatar size) now live where they belong — `Size`/`SizeTable`/`ControlMetrics` in the theme (they are native-metric values, §5.5), the trait in core's ungated `common`.
Our divergence from gpui-kit: the per-size metrics (control heights, paddings, text sizes, knob/indicator diameters) resolve from the **theme**, not from constants in the component layer — they are native-metric values (§5.5) and every component already reads its metrics through tokens. Implementation shape: the theme gains a size-class table (`Size` → control height/padding/text metrics), and each control implements `Sizable` by reading that table at paint time. Retrofits land one component per unit (Button first, as the API template) with the trait living in the ungated `common` module.
Our divergence from gpui-kit held: the per-size metrics resolve from the **theme's size table at paint time**, not from constants in the component layer. All ten controls implement `Sizable`; `Size::Custom(side)` derives the other metrics from the side length. Still open, when a real need arrives: TOML overrides for the size table in `ThemeDefinition`, and per-platform size tables from the Phase F native-metrics work.
## 7. Milestones
examples/gallery/src/main.rs
+13 -3
View File
@@ -7,7 +7,7 @@ use gpui::{
use gpui_native_core::avatar::Avatar;
use gpui_native_core::button::{Button, ButtonVariant};
use gpui_native_core::checkbox::Checkbox;
use gpui_native_core::common::{h_flex, v_flex};
use gpui_native_core::common::{Sizable as _, h_flex, v_flex};
use gpui_native_core::input::{Input, InputState};
use gpui_native_core::link::Link;
use gpui_native_core::progress::Progress;
@@ -206,6 +206,14 @@ impl Render for Gallery {
.icon(IconRole::Folder),
),
)
.child(
h_flex()
.items_center()
.gap_2()
.child(Button::new("gallery-button-sm").label("Small").small())
.child(Button::new("gallery-button-md").label("Medium"))
.child(Button::new("gallery-button-lg").label("Large").large()),
)
.child(
div()
.text_xs()
@@ -455,8 +463,8 @@ impl Render for Gallery {
.name("Ada Lovelace")
.picture(Some("https://example.com/missing.png")),
)
.child(Avatar::new("grace@reya.info").name("Grace Hopper"))
.child(Avatar::new("bot@reya.info")),
.child(Avatar::new("grace@reya.info").name("Grace Hopper").small())
.child(Avatar::new("desk@reya.info").name("Help Desk").large()),
),
)
.child(
@@ -602,10 +610,12 @@ fn main() {
},
|window, cx| {
Theme::sync_from_window(window, cx);
Theme::sync_window_rem_size(window, cx);
// Detached on purpose: the subscription lives as long as the window.
window
.observe_window_appearance(|window, cx| {
Theme::sync_from_window(window, cx);
Theme::sync_window_rem_size(window, cx);
cx.refresh_windows();
})
.detach();