Skip to content

Commit

Permalink
Merge pull request #162 from conceptadev/feat/create-of-methods-for-d…
Browse files Browse the repository at this point in the history
…esign-tokens

Create new of method for spacing
  • Loading branch information
leoafarias authored Jan 25, 2024
2 parents 0779e23 + 06c8e8e commit 6dd766b
Show file tree
Hide file tree
Showing 12 changed files with 2,634 additions and 2,473 deletions.
4,843 changes: 2,419 additions & 2,424 deletions coverage/lcov.info

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions example/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
23 changes: 14 additions & 9 deletions lib/src/attributes/border/border_radius_dto.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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]
///
Expand Down Expand Up @@ -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),
);
}

Expand Down
3 changes: 3 additions & 0 deletions lib/src/attributes/scalars/scalar_util.dart
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 2 additions & 0 deletions lib/src/attributes/spacing/spacing_util.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}
3 changes: 0 additions & 3 deletions lib/src/theme/tokens/mix_token.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
32 changes: 23 additions & 9 deletions lib/src/theme/tokens/token_util.dart
Original file line number Diff line number Diff line change
@@ -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
Expand Down
84 changes: 78 additions & 6 deletions test/src/theme/mix_theme_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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());
Expand Down
7 changes: 3 additions & 4 deletions test/src/theme/tokens/radius_token_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

Expand Down
6 changes: 0 additions & 6 deletions test/src/theme/tokens/space_token_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down
Loading

1 comment on commit 6dd766b

@vercel
Copy link

@vercel vercel bot commented on 6dd766b Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.