From 1df2b26b9791fdf483dd2936419c727bdba1984a Mon Sep 17 00:00:00 2001 From: Joel Date: Fri, 22 May 2026 07:31:52 +0530 Subject: [PATCH] =?UTF-8?q?Fix=20checkbox=20shape=20=E2=80=94=20square=20b?= =?UTF-8?q?ox=20via=20a=20new=20radius=5Fxs=20token?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit checkbox painted its 18px box with radius_sm (7px), which reads as a circle rather than a checkbox. Add a radius_xs token (4px) + rounding_xs() helper and use it for the checkbox box, so it renders as a proper square. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components.rs | 6 ++++-- src/tokens.rs | 10 ++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components.rs b/src/components.rs index 32c1362..487c554 100644 --- a/src/components.rs +++ b/src/components.rs @@ -659,11 +659,13 @@ pub fn checkbox( pos2(rect.left(), rect.center().y - box_side / 2.0), Vec2::splat(box_side), ); + // A checkbox box reads as a square — `radius_sm` on an 18 px box looks + // like a circle, so use the tighter `radius_xs`. ui.painter() - .rect_filled(box_rect, t.rounding_sm(), lerp_color(t.card, t.accent, on)); + .rect_filled(box_rect, t.rounding_xs(), lerp_color(t.card, t.accent, on)); let border = lerp_color(lerp_color(t.border, t.border_strong, hv), t.accent, on); ui.painter() - .rect_stroke(box_rect.shrink(0.5), t.rounding_sm(), Stroke::new(1.0, border)); + .rect_stroke(box_rect.shrink(0.5), t.rounding_xs(), Stroke::new(1.0, border)); if on > 0.01 { let c = box_rect.center(); let stroke = Stroke::new(2.0, t.accent_ink.gamma_multiply(on)); diff --git a/src/tokens.rs b/src/tokens.rs index a4cb763..050ce27 100644 --- a/src/tokens.rs +++ b/src/tokens.rs @@ -68,6 +68,9 @@ pub struct Tokens { pub success: Color32, /// Corner radii. + /// Extra-small — tight controls where `radius_sm` reads as a circle + /// (checkbox boxes, small swatches). + pub radius_xs: f32, pub radius_sm: f32, pub radius_md: f32, pub radius_lg: f32, @@ -104,6 +107,7 @@ impl Tokens { danger: Color32::from_rgb(0xef, 0x5c, 0x68), warning: Color32::from_rgb(0xe0, 0xa4, 0x3f), success: Color32::from_rgb(0x3e, 0xcf, 0x8e), + radius_xs: 4.0, radius_sm: 7.0, radius_md: 12.0, radius_lg: 16.0, @@ -138,6 +142,7 @@ impl Tokens { danger: Color32::from_rgb(0xcf, 0x43, 0x4c), warning: Color32::from_rgb(0xb8, 0x7a, 0x18), success: Color32::from_rgb(0x1a, 0x9d, 0x6a), + radius_xs: 4.0, radius_sm: 7.0, radius_md: 12.0, radius_lg: 16.0, @@ -167,4 +172,9 @@ impl Tokens { pub fn rounding_sm(&self) -> egui::Rounding { egui::Rounding::same(self.radius_sm) } + + /// `radius_xs` as an [`egui::Rounding`]. + pub fn rounding_xs(&self) -> egui::Rounding { + egui::Rounding::same(self.radius_xs) + } }