diff --git a/packages/mix/example/lib/api/design_tokens/theme_tokens.dart b/packages/mix/example/lib/api/design_tokens/theme_tokens.dart index 5e9177fef..dcfe7abfe 100644 --- a/packages/mix/example/lib/api/design_tokens/theme_tokens.dart +++ b/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); } diff --git a/packages/mix/lib/src/properties/painting/decoration_mix.dart b/packages/mix/lib/src/properties/painting/decoration_mix.dart index 8313bb064..b0318f75c 100644 --- a/packages/mix/lib/src/properties/painting/decoration_mix.dart +++ b/packages/mix/lib/src/properties/painting/decoration_mix.dart @@ -62,7 +62,7 @@ sealed class DecorationMix extends Mix { } /// Creates with box shadows. - static BoxDecorationMix boxShadow(List value) { + static BoxDecorationMix boxShadow(BoxShadowListMix value) { return BoxDecorationMix(boxShadow: value); } @@ -124,7 +124,7 @@ final class BoxDecorationMix extends DecorationMix Color? color, DecorationImageMix? image, GradientMix? gradient, - List? boxShadow, + BoxShadowListMix? boxShadow, }) : this.create( border: Prop.maybeMix(border), borderRadius: Prop.maybeMix(borderRadius), @@ -133,9 +133,7 @@ final class BoxDecorationMix extends DecorationMix 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 BoxDecorationMix.gradient(GradientMix gradient) : this(gradient: gradient); /// Creates a box decoration with only the box shadows specified. - BoxDecorationMix.boxShadow(List boxShadow) + BoxDecorationMix.boxShadow(BoxShadowListMix boxShadow) : this(boxShadow: boxShadow); /// Creates a [BoxDecorationMix] from an existing [BoxDecoration]. @@ -177,7 +175,13 @@ final class BoxDecorationMix extends DecorationMix 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 } /// Returns a copy with the specified box shadows. - BoxDecorationMix boxShadow(List value) { + BoxDecorationMix boxShadow(BoxShadowListMix value) { return merge(BoxDecorationMix.boxShadow(value)); } diff --git a/packages/mix/lib/src/properties/painting/decoration_util.dart b/packages/mix/lib/src/properties/painting/decoration_util.dart index 94d0c59f1..c11e6bede 100644 --- a/packages/mix/lib/src/properties/painting/decoration_util.dart +++ b/packages/mix/lib/src/properties/painting/decoration_util.dart @@ -68,10 +68,13 @@ final class BoxDecorationUtility> /// Utility for defining [BoxDecorationMix.boxShadow] from elevation late final elevation = MixUtility( - (elevation) => only(boxShadow: BoxShadowMix.fromElevation(elevation)), + (elevation) => + only(boxShadow: BoxShadowMix.fromElevation(elevation).toMix()), ); - late final boxShadow = BoxShadowUtility((v) => only(boxShadow: [v])); + late final boxShadow = BoxShadowUtility( + (v) => only(boxShadow: BoxShadowListMix([v])), + ); /// Utility for defining [BoxDecorationMix.borderRadius] late final _borderRadiusGeometry = BorderRadiusGeometryUtility( @@ -85,7 +88,7 @@ final class BoxDecorationUtility> /// Utility for defining [BoxDecorationMix.boxShadow] from a list of BoxShadow T boxShadows(List shadows) { - return only(boxShadow: shadows.map(BoxShadowMix.value).toList()); + return only(boxShadow: shadows.map(BoxShadowMix.value).toList().toMix()); } T only({ @@ -93,7 +96,7 @@ final class BoxDecorationUtility> DecorationImageMix? image, BoxBorderMix? border, BorderRadiusGeometryMix? borderRadius, - List? boxShadow, + BoxShadowListMix? boxShadow, GradientMix? gradient, BlendMode? backgroundBlendMode, BoxShape? shape, @@ -127,7 +130,7 @@ final class BoxDecorationUtility> 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, diff --git a/packages/mix/lib/src/properties/painting/shadow_mix.dart b/packages/mix/lib/src/properties/painting/shadow_mix.dart index cd9435942..fb4308f61 100644 --- a/packages/mix/lib/src/properties/painting/shadow_mix.dart +++ b/packages/mix/lib/src/properties/painting/shadow_mix.dart @@ -331,3 +331,9 @@ class BoxShadowListMix extends Mix> with Diagnosticable { @override List get props => [items]; } + +extension BoxShadowListMixExt on List { + BoxShadowListMix toMix() { + return BoxShadowListMix(this); + } +} diff --git a/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart b/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart index 96f8afda3..755c6ecc1 100644 --- a/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart +++ b/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart @@ -36,18 +36,18 @@ mixin DecorationStyleMixin> { /// Sets single shadow T shadow(BoxShadowMix value) { - return decoration(BoxDecorationMix.boxShadow([value])); + return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value]))); } /// Sets multiple shadows - T shadows(List 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()), ); } diff --git a/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart b/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart index 8d23f136e..35dea19b1 100644 --- a/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart +++ b/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart @@ -23,18 +23,18 @@ mixin ShadowStyleMixin> { 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 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()), ); } } diff --git a/packages/mix/test/src/core/decoration_merge_test.dart b/packages/mix/test/src/core/decoration_merge_test.dart index 444546ffc..0f8b5595e 100644 --- a/packages/mix/test/src/core/decoration_merge_test.dart +++ b/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, diff --git a/packages/mix/test/src/properties/painting/border_util_test.dart b/packages/mix/test/src/properties/painting/border_util_test.dart index 6380469ff..084248ce4 100644 --- a/packages/mix/test/src/properties/painting/border_util_test.dart +++ b/packages/mix/test/src/properties/painting/border_util_test.dart @@ -38,18 +38,18 @@ class TestBorderStyle extends MockStyle @override TestBorderStyle shadow(BoxShadowMix value) { - return decoration(BoxDecorationMix.boxShadow([value])); + return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value]))); } @override - TestBorderStyle shadows(List 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()), ); } diff --git a/packages/mix/test/src/properties/painting/decoration_mix_test.dart b/packages/mix/test/src/properties/painting/decoration_mix_test.dart index bd4e09c90..ac39e196f 100644 --- a/packages/mix/test/src/properties/painting/decoration_mix_test.dart +++ b/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); diff --git a/packages/mix/test/src/properties/painting/decoration_util_test.dart b/packages/mix/test/src/properties/painting/decoration_util_test.dart index c905dcecf..ac8d1eb00 100644 --- a/packages/mix/test/src/properties/painting/decoration_util_test.dart +++ b/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, ), - ], + ]), ), ); }); diff --git a/packages/mix/test/src/specs/box/box_style_test.dart b/packages/mix/test/src/specs/box/box_style_test.dart index 9a4a5d94a..80d469f14 100644 --- a/packages/mix/test/src/specs/box/box_style_test.dart +++ b/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);