Merge pull request #162 from conceptadev/feat/create-of-methods-for-design-tokens

Create new of method for spacing

Author: leoafarias

coverage/lcov.info

@@ -17,14 +17,14 @@ class CustomMixWidget extends StatelessWidget {
       marginVertical(10),
       elevation(10),
       borderRadius(10),
-      backgroundColor($md.colors.primary()),
+      backgroundColor($md.colorScheme.primary()),
       text.style($button()),
-      text.style.color($md.colors.onPrimary()),
+      text.style.color($md.colorScheme.onPrimary()),
       onHover(
         elevation(2),
         padding(20),
-        backgroundColor($md.colors.secondary()),
-        text.style.color($md.colors.onSecondary()),
+        backgroundColor($md.colorScheme.secondary()),
+        text.style.color($md.colorScheme.onSecondary()),
       ),
     );
     return Box(

example/README.md

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../../core/attribute.dart';
 import '../../factory/mix_provider_data.dart';
+import '../../theme/tokens/radius_token.dart';
 
 /// Represents a [Dto] Data transfer object of [BorderRadiusGeometry]
 ///
@@ -93,20 +94,24 @@ class BorderRadiusGeometryDto extends Dto<BorderRadiusGeometry>
 
   @override
   BorderRadiusGeometry resolve(MixData mix) {
-    const defaultRadius = Radius.zero;
+    Radius getRadiusValue(Radius? radius) {
+      if (radius == null) return Radius.zero;
+
+      return radius is RadiusRef ? mix.tokens.radiiRef(radius) : radius;
+    }
 
     return isDirectional
         ? BorderRadiusDirectional.only(
-            topStart: topStart ?? defaultRadius,
-            topEnd: topEnd ?? defaultRadius,
-            bottomStart: bottomStart ?? defaultRadius,
-            bottomEnd: bottomEnd ?? defaultRadius,
+            topStart: getRadiusValue(topStart),
+            topEnd: getRadiusValue(topEnd),
+            bottomStart: getRadiusValue(bottomStart),
+            bottomEnd: getRadiusValue(bottomEnd),
           )
         : BorderRadius.only(
-            topLeft: topLeft ?? defaultRadius,
-            topRight: topRight ?? defaultRadius,
-            bottomLeft: bottomLeft ?? defaultRadius,
-            bottomRight: bottomRight ?? defaultRadius,
+            topLeft: getRadiusValue(topLeft),
+            topRight: getRadiusValue(topRight),
+            bottomLeft: getRadiusValue(bottomLeft),
+            bottomRight: getRadiusValue(bottomRight),
           );
   }
 

lib/src/attributes/border/border_radius_dto.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../core/attribute.dart';
+import '../../theme/tokens/radius_token.dart';
 
 typedef UtilityBuilder<ReturnType, ParamType> = ReturnType Function(
   ParamType value,
@@ -686,6 +687,8 @@ class RadiusUtility<T extends StyleAttribute> extends MixUtility<T, Radius> {
   T circular(double radius) => _builder(Radius.circular(radius));
 
   T call(double radius) => _builder(Radius.circular(radius));
+
+  T of(RadiusToken ref) => _builder(ref());
 }
 
 /// Utility for setting `TextDecorationStyle` values.

lib/src/attributes/scalars/scalar_util.dart

@@ -439,4 +439,6 @@ class SpacingSideUtility<T extends StyleAttribute>
 
   /// Applies a custom spacing value
   T call(double value) => builder(value);
+
+  T of(SpaceToken ref) => builder(ref());
 }

lib/src/attributes/spacing/spacing_util.dart

@@ -67,9 +67,6 @@ class StyledTokens<T extends MixToken<V>, V> with Comparable {
   }
 
   StyledTokens<T, V> merge(StyledTokens<T, V> other) {
-    //  TODO: This is a temporary solution, but it works for now
-    // ovrite the keys on this _map with the keys from the other _map
-
     final newMap = Map<T, V>.from(_map);
 
     newMap.addAll(other._map);

lib/src/theme/tokens/mix_token.dart

@@ -1,32 +1,46 @@
 import 'package:flutter/material.dart';
 
 import '../material/material_tokens.dart';
+import 'breakpoints_token.dart';
 import 'radius_token.dart';
 import 'space_token.dart';
 
 const $md = MaterialTokens();
 const $radii = RadiiTokenUtil();
 const $space = SpaceTokenUtil();
 const $colors = ColorTokenUtil();
+const $breakpoints = BreakpointTokenUtil();
 const $textStyles = TextStyleTokenUtil();
 
 @immutable
 class RadiiTokenUtil {
   const RadiiTokenUtil();
-  RadiusRef small() => RadiusToken.small();
-  RadiusRef medium() => RadiusToken.medium();
-  RadiusRef large() => RadiusToken.large();
+
+  final small = RadiusToken.small;
+  final medium = RadiusToken.medium;
+  final large = RadiusToken.large;
 }
 
 @immutable
 class SpaceTokenUtil {
   const SpaceTokenUtil();
-  SpaceRef xsmall() => SpaceToken.xsmall();
-  SpaceRef small() => SpaceToken.small();
-  SpaceRef medium() => SpaceToken.medium();
-  SpaceRef large() => SpaceToken.large();
-  SpaceRef xlarge() => SpaceToken.xlarge();
-  SpaceRef xxlarge() => SpaceToken.xxlarge();
+
+  final xsmall = SpaceToken.xsmall;
+  final small = SpaceToken.small;
+  final medium = SpaceToken.medium;
+  final large = SpaceToken.large;
+  final xlarge = SpaceToken.xlarge;
+  final xxlarge = SpaceToken.xxlarge;
+}
+
+@immutable
+class BreakpointTokenUtil {
+  const BreakpointTokenUtil();
+
+  final xsmall = BreakpointToken.xsmall;
+  final small = BreakpointToken.small;
+  final medium = BreakpointToken.medium;
+  final large = BreakpointToken.large;
 }
 
 @immutable

lib/src/theme/tokens/token_util.dart

@@ -6,14 +6,34 @@ import '../../helpers/testing_utils.dart';
 
 void main() {
   const primaryColor = ColorToken('primary');
+  final theme = MixThemeData(
+    colors: {
+      primaryColor: Colors.blue,
+      $md.colorScheme.error: Colors.redAccent,
+    },
+    breakpoints: {
+      $breakpoints.small: const Breakpoint(
+        minWidth: 0,
+        maxWidth: 599,
+      ),
+    },
+    radii: {
+      $radii.small: const Radius.circular(200),
+      $radii.large: const Radius.circular(2000),
+    },
+    space: {
+      $space.small: 30,
+    },
+    textStyles: {
+      $md.textTheme.bodyLarge: const TextStyle(
+        fontSize: 200,
+        fontWeight: FontWeight.w300,
+      ),
+    },
+  );
+
   group('MixTheme', () {
     testWidgets('MixTheme.of', (tester) async {
-      final theme = MixThemeData(
-        colors: {
-          primaryColor: Colors.blue,
-        },
-      );
-
       await tester.pumpWithMixTheme(Container(), theme: theme);
 
       final context = tester.element(find.byType(Container));
@@ -22,6 +42,58 @@ void main() {
       expect(MixTheme.maybeOf(context), theme);
     });
 
+    testWidgets(
+        'when applied to Box via Style, it must reproduce the same values than the theme',
+        (tester) async {
+      const key = Key('box');
+
+      await tester.pumpWithMixTheme(
+        Box(
+          key: key,
+          style: Style(
+            box.color.of(primaryColor),
+            box.borderRadius.all.of($radii.small),
+            box.padding.horizontal.of($space.small),
+            text.style.of($md.textTheme.bodyLarge),
+          ),
+          child: const StyledText('Hello'),
+        ),
+        theme: theme,
+      );
+
+      final container = tester.widget<Container>(
+        find.descendant(
+          of: find.byKey(key),
+          matching: find.byType(Container),
+        ),
+      );
+
+      expect(
+        container.decoration,
+        BoxDecoration(
+          color: theme.colors[primaryColor],
+          borderRadius: BorderRadius.all(theme.radii[$radii.small]!),
+        ),
+      );
+
+      expect(
+        container.padding!.horizontal / 2,
+        theme.space[$space.small],
+      );
+
+      final textWidget = tester.widget<Text>(
+        find.descendant(
+          of: find.byKey(key),
+          matching: find.byType(Text),
+        ),
+      );
+
+      expect(
+        textWidget.style,
+        theme.textStyles[$md.textTheme.bodyLarge],
+      );
+    });
+
     // maybeOf
     testWidgets('MixTheme.maybeOf', (tester) async {
       await tester.pumpMaterialApp(Container());

test/src/theme/mix_theme_test.dart

@@ -57,17 +57,16 @@ void main() {
   });
 
   group('RadiiTokenUtil', () {
-    const radii = RadiiTokenUtil();
     test('small returns correct value', () {
-      expect(radii.small(), RadiusToken.small());
+      expect(const RadiiTokenUtil().small, RadiusToken.small);
     });
 
     test('medium returns correct value', () {
-      expect(radii.medium(), RadiusToken.medium());
+      expect(const RadiiTokenUtil().medium, RadiusToken.medium);
     });
 
     test('large returns correct value', () {
-      expect(radii.large(), RadiusToken.large());
+      expect(const RadiiTokenUtil().large, RadiusToken.large);
     });
   });
 

test/src/theme/tokens/radius_token_test.dart

@@ -6,7 +6,6 @@ import '../../../helpers/testing_utils.dart';
 void main() {
   group('SpaceToken tests', () {
     test('SpaceToken.xsmall() returns correct value', () {
-      expect(SpaceToken.xsmall(), SpaceToken.xsmall());
       expect(const SpaceToken('mix.space.xsmall'), SpaceToken.xsmall);
       expect('mix.space.xsmall', SpaceToken.xsmall.name);
       expect('mix.space.xsmall'.hashCode, SpaceToken.xsmall.name.hashCode);
@@ -16,7 +15,6 @@ void main() {
     });
 
     test('SpaceToken.small() returns correct value', () {
-      expect(SpaceToken.small(), SpaceToken.small());
       expect(const SpaceToken('mix.space.small'), SpaceToken.small);
       expect('mix.space.small', SpaceToken.small.name);
       expect('mix.space.small'.hashCode, SpaceToken.small.name.hashCode);
@@ -26,7 +24,6 @@ void main() {
     });
 
     test('SpaceToken.medium() returns correct value', () {
-      expect(SpaceToken.medium(), SpaceToken.medium());
       expect(const SpaceToken('mix.space.medium'), SpaceToken.medium);
       expect('mix.space.medium', SpaceToken.medium.name);
       expect('mix.space.medium'.hashCode, SpaceToken.medium.name.hashCode);
@@ -36,14 +33,12 @@ void main() {
     });
 
     test('SpaceToken.large() returns correct value', () {
-      expect(SpaceToken.large(), SpaceToken.large());
       expect(const SpaceToken('mix.space.large'), SpaceToken.large);
       expect('mix.space.large', SpaceToken.large.name);
       expect('mix.space.large'.hashCode, SpaceToken.large.name.hashCode);
     });
 
     test('SpaceToken.xlarge() returns correct value', () {
-      expect(SpaceToken.xlarge(), SpaceToken.xlarge());
       expect(const SpaceToken('mix.space.xlarge'), SpaceToken.xlarge);
       expect('mix.space.xlarge', SpaceToken.xlarge.name);
       expect('mix.space.xlarge'.hashCode, SpaceToken.xlarge.name.hashCode);
@@ -53,7 +48,6 @@ void main() {
     });
 
     test('SpaceToken.xxlarge() returns correct value', () {
-      expect(SpaceToken.xxlarge(), SpaceToken.xxlarge());
       expect(const SpaceToken('mix.space.xxlarge'), SpaceToken.xxlarge);
       expect('mix.space.xxlarge', SpaceToken.xxlarge.name);
       expect('mix.space.xxlarge'.hashCode, SpaceToken.xxlarge.name.hashCode);