fix: Gap resolve in flex attribute

melos.yaml

@@ -24,7 +24,7 @@ scripts:
   brb:
     description: Run build_runner for projects that have it as a dependency
     steps:
-      - melos run build_runner_clean
+      - melos run brbc
       - melos exec --depends-on="build_runner" --category="mix_deps" dart run build_runner build --delete-conflicting-outputs
   brbc: 
     run: melos exec --depends-on="build_runner" dart run build_runner clean

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

@@ -21,6 +21,8 @@ export 'constraints/constraints_dto.dart';
 export 'decoration/decoration_dto.dart';
 export 'decoration/image/decoration_image_dto.dart';
 export 'enum/enum_util.dart';
+export 'gap/gap_util.dart';
+export 'gap/spacing_side_dto.dart';
 export 'gradient/gradient_dto.dart';
 export 'nested_style/nested_style_attribute.dart';
 export 'nested_style/nested_style_util.dart';

packages/mix/lib/src/attributes/gap/gap_util.dart

@@ -0,0 +1,13 @@
+import '../../core/attribute.dart';
+import '../../core/utility.dart';
+import '../../theme/tokens/space_token.dart';
+import 'spacing_side_dto.dart';
+
+final class GapUtility<T extends Attribute>
+    extends MixUtility<T, SpacingSideDto> {
+  const GapUtility(super.builder);
+
+  T call(double value) => builder(SpacingSideDto(value));
+
+  T ref(SpaceToken ref) => builder(SpacingSideDto(ref()));
+}

packages/mix/lib/src/attributes/gap/spacing_side_dto.dart

@@ -0,0 +1,24 @@
+import '../../core/dto.dart';
+import '../../core/factory/mix_data.dart';
+
+class SpacingSideDto extends Dto<double> {
+  final double? value;
+
+  const SpacingSideDto(this.value);
+
+  @override
+  SpacingSideDto merge(SpacingSideDto? other) {
+    return SpacingSideDto(other?.value ?? value);
+  }
+
+  @override
+  double resolve(MixData mix) {
+    return mix.tokens.spaceTokenRef(value ?? defaultValue);
+  }
+
+  @override
+  double get defaultValue => 0;
+
+  @override
+  List<Object?> get props => [value];
+}

packages/mix/lib/src/specs/flex/flex_spec.dart

@@ -25,7 +25,10 @@ final class FlexSpec extends Spec<FlexSpec> with _$FlexSpec {
   final TextDirection? textDirection;
   final TextBaseline? textBaseline;
   final Clip? clipBehavior;
-  @MixableProperty(utilities: [MixableUtility(type: SpacingSideUtility)])
+  @MixableProperty(
+    dto: MixableFieldDto(type: SpacingSideDto),
+    utilities: [MixableUtility(type: GapUtility)],
+  )
   final double? gap;
 
   static const of = _$FlexSpec.of;

packages/mix/test/src/specs/flex/flex_attribute_test.dart

@@ -30,7 +30,7 @@ void main() {
         textDirection: TextDirection.rtl,
         textBaseline: TextBaseline.alphabetic,
         clipBehavior: Clip.antiAlias,
-        gap: 10.0,
+        gap: SpacingSideDto(10.0),
       );
       final mixData = MixData.create(MockBuildContext(), Style(attribute));
       final resolvedSpec = attribute.resolve(mixData);
@@ -46,6 +46,45 @@ void main() {
       expect(resolvedSpec.gap, 10.0);
     });
 
+    testWidgets('tokens resolve returns correct FlexSpec', (tester) async {
+      const tokenValue = 8.0;
+
+      final theme = MixThemeData(
+        spaces: {
+          $token.space.small: tokenValue,
+        },
+      );
+
+      late MixData mixData;
+
+      await tester.pumpWidget(
+        MixTheme(
+          data: theme,
+          child: MaterialApp(
+            home: Scaffold(
+              body: Builder(
+                builder: (BuildContext context) {
+                  mixData = MixData.create(
+                    context,
+                    Style(
+                      $flex.gap.ref($token.space.small),
+                    ),
+                  );
+
+                  return Container();
+                },
+              ),
+            ),
+          ),
+        ),
+      );
+
+      final attribute = mixData.whereType<FlexSpecAttribute>().first;
+      final resolvedSpec = attribute.resolve(mixData);
+
+      expect(resolvedSpec.gap, tokenValue);
+    });
+
     test('merge returns correct FlexMixAttribute', () {
       const attribute1 = FlexSpecAttribute(
         direction: Axis.horizontal,
@@ -56,7 +95,7 @@ void main() {
         textDirection: TextDirection.rtl,
         textBaseline: TextBaseline.alphabetic,
         clipBehavior: Clip.antiAlias,
-        gap: 10.0,
+        gap: SpacingSideDto(10.0),
       );
       const attribute2 = FlexSpecAttribute(
         direction: Axis.vertical,
@@ -67,7 +106,7 @@ void main() {
         textDirection: TextDirection.ltr,
         textBaseline: TextBaseline.ideographic,
         clipBehavior: Clip.hardEdge,
-        gap: 20.0,
+        gap: SpacingSideDto(20.0),
       );
       final mergedAttribute = attribute1.merge(attribute2);
 
@@ -79,7 +118,7 @@ void main() {
       expect(mergedAttribute.textDirection, TextDirection.ltr);
       expect(mergedAttribute.textBaseline, TextBaseline.ideographic);
       expect(mergedAttribute.clipBehavior, Clip.hardEdge);
-      expect(mergedAttribute.gap, 20.0);
+      expect(mergedAttribute.gap, const SpacingSideDto(20.0));
     });
   });
 }

packages/mix/test/src/specs/flex/flex_spec_test.dart

@@ -21,7 +21,7 @@ void main() {
             textDirection: TextDirection.ltr,
             textBaseline: TextBaseline.alphabetic,
             clipBehavior: Clip.antiAlias,
-            gap: 10,
+            gap: SpacingSideDto(10),
           ),
         ),
       );

packages/mix/test/src/specs/flex/flex_util_test.dart

@@ -89,7 +89,7 @@ void main() {
     test('gap() returns correct instance', () {
       final flex = flexUtility.gap(10);
 
-      expect(flex.gap, 10);
+      expect(flex.gap, const SpacingSideDto(10));
     });
 
     // row()