refactor: replace List<BoxShadow> to use BoxShadowListMix type

packages/mix/example/lib/api/design_tokens/theme_tokens.dart

@@ -24,6 +24,7 @@ void main() {
 final $primaryColor = ColorToken('primary');
 final $pill = RadiusToken('pill');
 final $spacing = SpaceToken('spacing.large');
+final $shadow = BoxShadowToken('shadow.card');
 
 class Example extends StatelessWidget {
   const Example({super.key});
@@ -34,6 +35,9 @@ class Example extends StatelessWidget {
       colors: {$primaryColor: Colors.blue},
       spaces: {$spacing: 16.0},
       radii: {$pill: Radius.circular(20)},
+      boxShadows: {
+        $shadow: [BoxShadow(color: Colors.red, blurRadius: 10)],
+      },
       child: _Example(),
     );
   }
@@ -49,7 +53,8 @@ class _Example extends StatelessWidget {
         .color($primaryColor())
         .height(100)
         .width(100)
-        .paddingAll(16.0);
+        .paddingAll(16.0)
+        .shadows($shadow.mix());
 
     return Box(style: style);
   }

packages/mix/lib/src/properties/painting/decoration_mix.dart

@@ -62,7 +62,7 @@ sealed class DecorationMix<T extends Decoration> extends Mix<T> {
   }
 
   /// Creates with box shadows.
-  static BoxDecorationMix boxShadow(List<BoxShadowMix> value) {
+  static BoxDecorationMix boxShadow(BoxShadowListMix value) {
     return BoxDecorationMix(boxShadow: value);
   }
 
@@ -124,7 +124,7 @@ final class BoxDecorationMix extends DecorationMix<BoxDecoration>
     Color? color,
     DecorationImageMix? image,
     GradientMix? gradient,
-    List<BoxShadowMix>? boxShadow,
+    BoxShadowListMix? boxShadow,
   }) : this.create(
          border: Prop.maybeMix(border),
          borderRadius: Prop.maybeMix(borderRadius),
@@ -133,9 +133,7 @@ final class BoxDecorationMix extends DecorationMix<BoxDecoration>
          color: Prop.maybe(color),
          image: Prop.maybeMix(image),
          gradient: Prop.maybeMix(gradient),
-         boxShadow: boxShadow != null
-             ? Prop.mix(BoxShadowListMix(boxShadow))
-             : null,
+         boxShadow: boxShadow != null ? Prop.mix(boxShadow) : null,
        );
 
   /// Creates with border only.
@@ -162,7 +160,7 @@ final class BoxDecorationMix extends DecorationMix<BoxDecoration>
   BoxDecorationMix.gradient(GradientMix gradient) : this(gradient: gradient);
 
   /// Creates a box decoration with only the box shadows specified.
-  BoxDecorationMix.boxShadow(List<BoxShadowMix> boxShadow)
+  BoxDecorationMix.boxShadow(BoxShadowListMix boxShadow)
     : this(boxShadow: boxShadow);
 
   /// Creates a [BoxDecorationMix] from an existing [BoxDecoration].
@@ -177,7 +175,13 @@ final class BoxDecorationMix extends DecorationMix<BoxDecoration>
         color: decoration.color,
         image: DecorationImageMix.maybeValue(decoration.image),
         gradient: GradientMix.maybeValue(decoration.gradient),
-        boxShadow: decoration.boxShadow?.map(BoxShadowMix.value).toList(),
+        boxShadow: decoration.boxShadow != null
+            ? BoxShadowListMix(
+                decoration.boxShadow!
+                    .map((e) => BoxShadowMix.value(e))
+                    .toList(),
+              )
+            : null,
       );
 
   const BoxDecorationMix.create({
@@ -217,7 +221,7 @@ final class BoxDecorationMix extends DecorationMix<BoxDecoration>
   }
 
   /// Returns a copy with the specified box shadows.
-  BoxDecorationMix boxShadow(List<BoxShadowMix> value) {
+  BoxDecorationMix boxShadow(BoxShadowListMix value) {
     return merge(BoxDecorationMix.boxShadow(value));
   }
 

packages/mix/lib/src/properties/painting/decoration_util.dart

@@ -68,10 +68,13 @@ final class BoxDecorationUtility<T extends Style<Object?>>
 
   /// Utility for defining [BoxDecorationMix.boxShadow] from elevation
   late final elevation = MixUtility<T, ElevationShadow>(
-    (elevation) => only(boxShadow: BoxShadowMix.fromElevation(elevation)),
+    (elevation) =>
+        only(boxShadow: BoxShadowMix.fromElevation(elevation).toMix()),
   );
 
-  late final boxShadow = BoxShadowUtility<T>((v) => only(boxShadow: [v]));
+  late final boxShadow = BoxShadowUtility<T>(
+    (v) => only(boxShadow: BoxShadowListMix([v])),
+  );
 
   /// Utility for defining [BoxDecorationMix.borderRadius]
   late final _borderRadiusGeometry = BorderRadiusGeometryUtility<T>(
@@ -85,15 +88,15 @@ final class BoxDecorationUtility<T extends Style<Object?>>
   /// Utility for defining [BoxDecorationMix.boxShadow] from a list of BoxShadow
 
   T boxShadows(List<BoxShadow> shadows) {
-    return only(boxShadow: shadows.map(BoxShadowMix.value).toList());
+    return only(boxShadow: shadows.map(BoxShadowMix.value).toList().toMix());
   }
 
   T only({
     Color? color,
     DecorationImageMix? image,
     BoxBorderMix? border,
     BorderRadiusGeometryMix? borderRadius,
-    List<BoxShadowMix>? boxShadow,
+    BoxShadowListMix? boxShadow,
     GradientMix? gradient,
     BlendMode? backgroundBlendMode,
     BoxShape? shape,
@@ -127,7 +130,7 @@ final class BoxDecorationUtility<T extends Style<Object?>>
       image: DecorationImageMix.maybeValue(image),
       border: BoxBorderMix.maybeValue(border),
       borderRadius: BorderRadiusGeometryMix.maybeValue(borderRadius),
-      boxShadow: boxShadow?.map(BoxShadowMix.value).toList(),
+      boxShadow: boxShadow?.map(BoxShadowMix.value).toList().toMix(),
       gradient: GradientMix.maybeValue(gradient),
       backgroundBlendMode: backgroundBlendMode,
       shape: shape,

packages/mix/lib/src/properties/painting/shadow_mix.dart

@@ -331,3 +331,9 @@ class BoxShadowListMix extends Mix<List<BoxShadow>> with Diagnosticable {
   @override
   List<Object?> get props => [items];
 }
+
+extension BoxShadowListMixExt on List<BoxShadowMix> {
+  BoxShadowListMix toMix() {
+    return BoxShadowListMix(this);
+  }
+}

packages/mix/lib/src/style/mixins/decoration_style_mixin.dart

@@ -36,18 +36,18 @@ mixin DecorationStyleMixin<T extends Mix<Object?>> {
 
   /// Sets single shadow
   T shadow(BoxShadowMix value) {
-    return decoration(BoxDecorationMix.boxShadow([value]));
+    return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value])));
   }
 
   /// Sets multiple shadows
-  T shadows(List<BoxShadowMix> value) {
+  T shadows(BoxShadowListMix value) {
     return decoration(BoxDecorationMix.boxShadow(value));
   }
 
   /// Sets elevation shadow
   T elevation(ElevationShadow value) {
     return decoration(
-      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)),
+      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()),
     );
   }
 

packages/mix/lib/src/style/mixins/shadow_style_mixin.dart

@@ -23,18 +23,18 @@ mixin ShadowStyleMixin<T extends Mix<Object?>> {
       spreadRadius: spreadRadius,
     );
 
-    return decoration(BoxDecorationMix.boxShadow([shadow]));
+    return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([shadow])));
   }
 
   /// Creates multiple box shadows from a list of BoxShadowMix
-  T boxShadows(List<BoxShadowMix> value) {
+  T boxShadows(BoxShadowListMix value) {
     return decoration(BoxDecorationMix.boxShadow(value));
   }
 
   /// Creates box shadows from Material Design elevation level
   T boxElevation(ElevationShadow value) {
     return decoration(
-      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)),
+      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()),
     );
   }
 }

packages/mix/test/src/core/decoration_merge_test.dart

@@ -292,7 +292,9 @@ void main() {
 
       test('handles decorations with only shadows/boxShadow', () {
         final boxWithShadows = BoxDecorationMix(
-          boxShadow: [BoxShadowMix(color: Colors.black26, blurRadius: 4)],
+          boxShadow: BoxShadowListMix([
+            BoxShadowMix(color: Colors.black26, blurRadius: 4),
+          ]),
         );
         final shapeWithShadows = ShapeDecorationMix(
           shadows: [
@@ -351,7 +353,9 @@ void main() {
         final box = BoxDecorationMix(
           color: Colors.red,
           gradient: LinearGradientMix(colors: [Colors.white, Colors.black]),
-          boxShadow: [BoxShadowMix(color: Colors.black26, blurRadius: 4)],
+          boxShadow: BoxShadowListMix([
+            BoxShadowMix(color: Colors.black26, blurRadius: 4),
+          ]),
         );
         final shape = ShapeDecorationMix(
           color: Colors.blue,

packages/mix/test/src/properties/painting/border_util_test.dart

@@ -38,18 +38,18 @@ class TestBorderStyle extends MockStyle<DecorationMix>
 
   @override
   TestBorderStyle shadow(BoxShadowMix value) {
-    return decoration(BoxDecorationMix.boxShadow([value]));
+    return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value])));
   }
 
   @override
-  TestBorderStyle shadows(List<BoxShadowMix> value) {
+  TestBorderStyle shadows(BoxShadowListMix value) {
     return decoration(BoxDecorationMix.boxShadow(value));
   }
 
   @override
   TestBorderStyle elevation(ElevationShadow value) {
     return decoration(
-      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)),
+      BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()),
     );
   }
 

packages/mix/test/src/properties/painting/decoration_mix_test.dart

@@ -14,7 +14,7 @@ void main() {
           backgroundBlendMode: BlendMode.multiply,
           border: BorderMix.all(BorderSideMix(color: Colors.red, width: 2.0)),
           borderRadius: BorderRadiusMix(topLeft: const Radius.circular(8.0)),
-          boxShadow: [BoxShadowMix(color: Colors.black, blurRadius: 5.0)],
+          boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.black, blurRadius: 5.0)]),
         );
 
         expect(boxDecorationMix.$color, resolvesTo(Colors.blue));
@@ -163,10 +163,10 @@ void main() {
       test('resolves with complex properties', () {
         final boxDecorationMix = BoxDecorationMix(
           borderRadius: BorderRadiusMix(topLeft: const Radius.circular(8.0)),
-          boxShadow: [
+          boxShadow: BoxShadowListMix([
             BoxShadowMix(color: Colors.black, blurRadius: 5.0),
             BoxShadowMix(color: Colors.grey, blurRadius: 10.0),
-          ],
+          ]),
         );
 
         final resolved = boxDecorationMix.resolve(MockBuildContext());
@@ -207,11 +207,11 @@ void main() {
 
       test('merges list properties correctly', () {
         final first = BoxDecorationMix(
-          boxShadow: [BoxShadowMix(color: Colors.black, blurRadius: 5.0)],
+          boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.black, blurRadius: 5.0)]),
         );
 
         final second = BoxDecorationMix(
-          boxShadow: [BoxShadowMix(color: Colors.grey, blurRadius: 10.0)],
+          boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.grey, blurRadius: 10.0)]),
         );
 
         final merged = first.merge(second);

packages/mix/test/src/properties/painting/decoration_util_test.dart

@@ -352,14 +352,14 @@ void main() {
           BoxDecorationMix(
             color: Colors.red,
             shape: BoxShape.circle,
-            boxShadow: [
+            boxShadow: BoxShadowListMix([
               BoxShadowMix(
                 color: Colors.black,
                 offset: const Offset(2, 2),
                 blurRadius: 4.0,
                 spreadRadius: 0.0,
               ),
-            ],
+            ]),
           ),
         );
       });

packages/mix/test/src/specs/box/box_style_test.dart

@@ -252,10 +252,10 @@ void main() {
       });
 
       test('shadows method sets multiple shadows', () {
-        final shadows = [
+        final shadows = BoxShadowListMix([
           BoxShadowMix(color: Colors.black, blurRadius: 5.0),
           BoxShadowMix(color: Colors.grey, blurRadius: 10.0),
-        ];
+        ]);
         final boxMix = BoxStyler().shadows(shadows);
 
         expect(boxMix.$decoration, isNotNull);