add motion to switch

crates/core/src/switch.rs

@@ -2,9 +2,9 @@
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    App, BoxShadow, ElementId, InteractiveElement as _, IntoElement, ParentElement as _,
-    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, Styled as _, Toggled, Window,
-    div, px,
+    AnimationExt as _, App, BoxShadow, ElementId, InteractiveElement as _, IntoElement,
+    ParentElement as _, RenderOnce, Role, SharedString, SpringAnimation, SpringConfig,
+    StatefulInteractiveElement as _, Styled as _, Toggled, Window, div, px,
 };
 use gpui_native_theme::{ActiveTheme as _, Size};
 
@@ -100,11 +100,15 @@ impl RenderOnce for Switch {
 
         let knob = metrics.icon_size;
         let inset = metrics.icon_size * 0.125;
+        let travel = track_width - knob - inset * 2.;
 
         let next = !self.checked;
         let on_change = self.on_change;
         let a11y_label = self.a11y_label.or_else(|| self.label.clone());
 
+        let anim_config = SpringConfig::new(500., 35., 1.);
+        let anim = SpringAnimation::new(anim_config).to(if self.checked { travel } else { px(0.) });
+
         h_flex()
             .id(self.id)
             .gap_1p5()
@@ -128,29 +132,31 @@ impl RenderOnce for Switch {
                     })
             })
             .child(
-                h_flex()
+                div()
                     .flex_none()
+                    .relative()
                     .w(track_width)
                     .h(track_height)
-                    .p(inset)
                     .rounded(theme.radius.full)
                     .when(self.checked, |track| {
                         track
                             .bg(ramps.primary.base)
-                            .justify_end()
                             .hover(|style| style.bg(ramps.primary.hover))
                     })
-                    .when(!self.checked, |track| {
-                        track.bg(colors.border).justify_start()
-                    })
+                    .when(!self.checked, |track| track.bg(colors.border))
                     .child(
                         div()
+                            .absolute()
+                            .top(inset)
+                            .left(inset)
                             .size(knob)
-                            .flex_none()
                             .rounded(theme.radius.full)
                             .bg(colors.primary_foreground)
                             .border_1()
-                            .border_color(colors.border),
+                            .border_color(colors.border)
+                            .with_spring("switch-thumb", anim, move |thumb, offset| {
+                                thumb.left(inset + offset)
+                            }),
                     ),
             )
             .when_some(self.label, |switch, label| switch.child(label))

crates/theme/Cargo.toml

@@ -10,6 +10,9 @@ gpui = { workspace = true }
 serde = { version = "1", features = ["derive"] }
 toml = "0.8"
 
+[dev-dependencies]
+gpui = { workspace = true, features = ["test-support"] }
+
 [target.'cfg(target_os = "macos")'.dependencies]
 block2 = "0.6"
 objc2 = "0.6"

crates/theme/src/lib.rs

@@ -333,6 +333,7 @@ pub(crate) fn reapply(cx: &mut App) {
     let system = cx.global::<ThemeEngine>().source.snapshot(variant);
     let resolved = resolve::resolve(&system, preset.as_ref(), mode_override);
 
+    cx.set_reduce_motion(resolved.accessibility.reduce_motion);
     cx.set_global(Theme::from_resolved(resolved));
     cx.refresh_windows();
 }