feat: Improve spring curve

packages/mix/lib/src/attributes/scalars/curves.dart

@@ -7,7 +7,7 @@ class SpringCurve extends Curve {
   late final SpringSimulation _sim;
   late final double _val;
 
-  SpringCurve({required Duration duration, double bounce = 0.0}) {
+  SpringCurve.durationBased({required Duration duration, double bounce = 0.0}) {
     assert(
       (bounce >= -1.0 && bounce <= 1.0),
       '"bounce" value must be between -1.0 and 1.0.',
@@ -28,6 +28,22 @@ class SpringCurve extends Curve {
     _val = (1 - _sim.x(1.0));
   }
 
+  SpringCurve({
+    double stiffness = 3.5,
+    double dampingRatio = 1.0,
+    double mass = 1.0,
+  }) {
+    final SpringDescription desc = SpringDescription.withDampingRatio(
+      mass: mass,
+      stiffness: stiffness,
+      ratio: dampingRatio,
+    );
+
+    _sim = SpringSimulation(desc, 0.0, 1.0, 0.0);
+
+    _val = (1 - _sim.x(1.0));
+  }
+
   @override
   double transform(double t) => _sim.x(t) + t * _val;
 }

packages/mix/lib/src/attributes/scalars/scalar_util.dart

@@ -90,10 +90,17 @@ final class CurveUtility<T extends Attribute> extends MixUtility<T, Curve>
   T as(Curve curve) => builder(curve);
 
   T spring({
-    Duration duration = const Duration(milliseconds: 500),
-    double bounce = 0.5,
+    double stiffness = 3.5,
+    double dampingRatio = 1.0,
+    double mass = 1.0,
   }) =>
-      builder(SpringCurve(duration: duration, bounce: bounce));
+      builder(
+        SpringCurve(
+          stiffness: stiffness,
+          dampingRatio: dampingRatio,
+          mass: mass,
+        ),
+      );
 }
 
 @MixableClassUtility(generateCallMethod: false)

packages/remix/lib/src/components/accordion/accordion_theme.dart

@@ -28,12 +28,16 @@ class FortalezaAccordionStyle extends AccordionStyle {
         ..text.style.fontWeight.w400()
         ..text.style.color.$neutral(12)
         ..trailingIcon.color.$neutral(10)
-        ..container.color.$neutral(1),
+        ..container.color.$neutral(1)
+        ..container.animated.curve.easeInCubic()
+        ..container.animated.duration(const Duration(milliseconds: 100)),
 
       $.contentContainer.chain
         ..padding.all.$space(3)
         ..border.style.none()
-        ..border.top.color.$neutral(6),
+        ..border.top.color.$neutral(6)
+        ..animated.curve.spring(stiffness: 100)
+        ..animated.duration(const Duration(milliseconds: 250)),
 
       // Text Container
       $.textContent.chain
@@ -48,9 +52,6 @@ class FortalezaAccordionStyle extends AccordionStyle {
       ),
     );
 
-    return Style.create([baseStyle(), style()]).animate(
-      duration: const Duration(milliseconds: 100),
-      curve: Curves.easeInOut,
-    );
+    return Style.create([baseStyle(), style()]);
   }
 }

packages/remix/lib/src/components/card/card.dart

@@ -21,11 +21,8 @@ base class CardSpec extends Spec<CardSpec> with _$CardSpec, Diagnosticable {
 
   static const from = _$CardSpec.from;
 
-  const CardSpec({
-    BoxSpec? container,
-    super.modifiers,
-    super.animated,
-  }) : container = container ?? const BoxSpec();
+  const CardSpec({BoxSpec? container, super.modifiers, super.animated})
+      : container = container ?? const BoxSpec();
 
   Widget call({Key? key, required Widget child}) {
     return CardSpecWidget(key: key, spec: this, child: child);

packages/remix/lib/src/components/card/card_widget.dart

@@ -35,19 +35,13 @@ class Card extends StatelessWidget {
 }
 
 class CardSpecWidget extends StatelessWidget {
-  const CardSpecWidget({
-    super.key,
-    required this.spec,
-    required this.child,
-  });
+  const CardSpecWidget({super.key, required this.spec, required this.child});
 
   final CardSpec? spec;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
-    return spec!.container(
-      child: child,
-    );
+    return spec!.container(child: child);
   }
 }

packages/remix/lib/src/components/dialog/dialog.dart

@@ -29,13 +29,16 @@ Future<T?> showDialog<T>({
   transitionBuilder ??= (context, animation, secondaryAnimation, child) {
     final curvedAnimation = CurvedAnimation(
       parent: animation,
-      curve: Curves.easeInOut,
+      curve: SpringCurve.durationBased(
+        duration: transitionDuration,
+        bounce: 0.2,
+      ),
     );
 
     return FadeTransition(
       opacity: curvedAnimation,
       child: ScaleTransition(
-        scale: curvedAnimation.drive(Tween(begin: 0.85, end: 1)),
+        scale: curvedAnimation.drive(Tween(begin: 0.7, end: 1)),
         child: child,
       ),
     );

packages/remix/lib/src/components/select/select_theme.dart

@@ -16,17 +16,17 @@ class FortalezaSelectStyle extends SelectStyle {
 
     final baseThemeOverrides = Style(
       $.menu.autoWidth.off(),
-      $.item.container.padding.horizontal.$space(3),
-      $.button.icon.color.$accentAlpha(12),
       $.menu.container.chain
         ..color.$neutral(1)
         ..border.all.color.$neutral(5)
         ..wrap.intrinsicWidth()
         ..elevation.e2()
         ..padding.all.$space(2),
-      $.button.flex.chain
-        ..gap.$space(1)
-        ..mainAxisSize.min(),
+      $.button.chain
+        ..icon.color.$accentAlpha(12)
+        ..flex.gap.$space(1)
+        ..flex.mainAxisSize.min(),
+      $.item.container.padding.horizontal.$space(3),
       spec.on.disabled(
         $.button.chain
           ..container.color.$neutral(2)

packages/remix/lib/src/components/switch/switch_style.dart

@@ -14,7 +14,9 @@ class SwitchStyle extends SpecStyle<SwitchSpecUtility> {
         ..borderRadius(99)
         ..padding.all(2)
         ..alignment.centerLeft()
-        ..color.grey.shade300(),
+        ..color.grey.shade300()
+        ..animated.curve.spring(stiffness: 100, dampingRatio: 1)
+        ..animated.duration(const Duration(milliseconds: 300)),
       spec.on.selected(
         $.container.chain
           ..alignment.centerRight()
@@ -25,13 +27,18 @@ class SwitchStyle extends SpecStyle<SwitchSpecUtility> {
 
     final indicatorStyle = [
       $.indicator.chain
+        ..wrap.align(alignment: Alignment.centerLeft)
         ..color.white()
         ..shape.circle()
         ..width(20)
         ..shadow.color.black12()
         ..shadow.offset(0, 2)
         ..shadow.blurRadius(4)
-        ..shadow.spreadRadius(1),
+        ..shadow.spreadRadius(1)
+        ..animated.curve.spring(stiffness: 100, dampingRatio: 0.7)
+        ..animated.duration(const Duration(milliseconds: 300)),
+      spec.on
+          .selected($.indicator.wrap.align(alignment: Alignment.centerRight)),
       spec.on.disabled($.indicator.color.grey.shade100()),
     ];
 

packages/remix/lib/src/components/switch/switch_widget.dart

@@ -63,16 +63,7 @@ class _SwitchState extends State<Switch> {
       onPress: widget.disabled ? null : _handleOnPress,
       controller: _controller,
       child: SpecBuilder(
-        style: style
-            .makeStyle(configuration)
-            .applyVariants(widget.variants)
-            .animate(
-              duration: const Duration(milliseconds: 400),
-              curve: SpringCurve(
-                duration: const Duration(milliseconds: 400),
-                bounce: 0.4,
-              ),
-            ),
+        style: style.makeStyle(configuration).applyVariants(widget.variants),
         builder: (context) {
           final spec = SwitchSpec.of(context);
 

packages/remix/lib/src/components/toast/toast_layer.dart

@@ -71,7 +71,7 @@ class ToastLayerState extends State<ToastLayer> implements ToastActions {
           reverseDuration: toast?.reverseAnimationDuration ??
               const Duration(milliseconds: 200),
           switchInCurve: toast?.animationCurve ??
-              SpringCurve(
+              SpringCurve.durationBased(
                 duration: const Duration(milliseconds: 500),
                 bounce: 0.2,
               ),