Skip to content

feat: add TokenStyleMixin with useToken method #830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tilucasoli wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

feat: add TokenStyleMixin with useToken method #830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c57e02a
feat: add TokenStyleMixin with useToken method
tilucasoli Jan 14, 2026
eb64195
merge: integrate latest main into feat/token-style-mixin
leoafarias Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/mix/lib/src/specs/box/box_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import '../../style/mixins/constraint_style_mixin.dart';
import '../../style/mixins/decoration_style_mixin.dart';
import '../../style/mixins/shadow_style_mixin.dart';
import '../../style/mixins/spacing_style_mixin.dart';
import '../../style/mixins/token_style_mixin.dart';
import '../../style/mixins/transform_style_mixin.dart';
import 'box_mutable_style.dart';
import 'box_spec.dart';
Expand All @@ -43,6 +44,7 @@ class BoxStyler extends MixStyler<BoxStyler, BoxSpec>
SpacingStyleMixin<BoxStyler>,
TransformStyleMixin<BoxStyler>,
ConstraintStyleMixin<BoxStyler>,
TokenStyleMixin<BoxStyler, BoxSpec>,
_$BoxStylerMixin {
@override
final Prop<AlignmentGeometry>? $alignment;
Expand Down
3 changes: 2 additions & 1 deletion packages/mix/lib/src/specs/flex/flex_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import '../../core/style_spec.dart';
import '../../modifiers/widget_modifier_config.dart';
import '../../style/abstracts/styler.dart';
import '../../style/mixins/flex_style_mixin.dart';
import '../../style/mixins/token_style_mixin.dart';
import 'flex_mutable_style.dart';
import 'flex_spec.dart';

Expand All @@ -29,7 +30,7 @@ typedef FlexMix = FlexStyler;
/// A style/attribute class for [FlexSpec], used to configure and compose flex layout properties.
@MixableStyler()
class FlexStyler extends MixStyler<FlexStyler, FlexSpec>
with FlexStyleMixin<FlexStyler>, _$FlexStylerMixin {
with FlexStyleMixin<FlexStyler>, TokenStyleMixin<FlexStyler, FlexSpec>, _$FlexStylerMixin {
@override
final Prop<Axis>? $direction;
@override
Expand Down
2 changes: 2 additions & 0 deletions packages/mix/lib/src/specs/flexbox/flexbox_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import '../../style/mixins/decoration_style_mixin.dart';
import '../../style/mixins/flex_style_mixin.dart';
import '../../style/mixins/shadow_style_mixin.dart';
import '../../style/mixins/spacing_style_mixin.dart';
import '../../style/mixins/token_style_mixin.dart';
import '../../style/mixins/transform_style_mixin.dart';
import '../box/box_spec.dart';
import '../box/box_style.dart';
Expand Down Expand Up @@ -53,6 +54,7 @@ class FlexBoxStyler extends MixStyler<FlexBoxStyler, FlexBoxSpec>
TransformStyleMixin<FlexBoxStyler>,
ConstraintStyleMixin<FlexBoxStyler>,
FlexStyleMixin<FlexBoxStyler>,
TokenStyleMixin<FlexBoxStyler, FlexBoxSpec>,
_$FlexBoxStylerMixin {
@override
final Prop<StyleSpec<BoxSpec>>? $box;
Expand Down
3 changes: 2 additions & 1 deletion packages/mix/lib/src/specs/icon/icon_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import '../../core/style_spec.dart';
import '../../modifiers/widget_modifier_config.dart';
import '../../properties/painting/shadow_mix.dart';
import '../../style/abstracts/styler.dart';
import '../../style/mixins/token_style_mixin.dart';
import 'icon_mutable_style.dart';
import 'icon_spec.dart';
import 'icon_widget.dart';
Expand All @@ -21,7 +22,7 @@ typedef IconMix = IconStyler;

@mixableStyler
class IconStyler extends MixStyler<IconStyler, IconSpec>
with _$IconStylerMixin {
with TokenStyleMixin<IconStyler, IconSpec>, _$IconStylerMixin {
@override
final Prop<Color>? $color;
@override
Expand Down
3 changes: 2 additions & 1 deletion packages/mix/lib/src/specs/image/image_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import '../../core/style.dart';
import '../../core/style_spec.dart';
import '../../modifiers/widget_modifier_config.dart';
import '../../style/abstracts/styler.dart';
import '../../style/mixins/token_style_mixin.dart';
import 'image_mutable_style.dart';
import 'image_spec.dart';
import 'image_widget.dart';
Expand All @@ -20,7 +21,7 @@ typedef ImageMix = ImageStyler;

@MixableStyler()
class ImageStyler extends MixStyler<ImageStyler, ImageSpec>
with _$ImageStylerMixin {
with TokenStyleMixin<ImageStyler, ImageSpec>, _$ImageStylerMixin {
@override
final Prop<ImageProvider<Object>>? $image;
@override
Expand Down
3 changes: 2 additions & 1 deletion packages/mix/lib/src/specs/stack/stack_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import '../../core/style.dart';
import '../../core/style_spec.dart';
import '../../modifiers/widget_modifier_config.dart';
import '../../style/abstracts/styler.dart';
import '../../style/mixins/token_style_mixin.dart';
import 'stack_mutable_style.dart';
import 'stack_spec.dart';

Expand All @@ -26,7 +27,7 @@ typedef StackMix = StackStyler;
/// the [StackSpec] constructor.
@MixableStyler()
class StackStyler extends MixStyler<StackStyler, StackSpec>
with _$StackStylerMixin {
with TokenStyleMixin<StackStyler, StackSpec>, _$StackStylerMixin {
@override
final Prop<AlignmentGeometry>? $alignment;
@override
Expand Down
2 changes: 2 additions & 0 deletions packages/mix/lib/src/specs/stackbox/stackbox_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import '../../style/mixins/constraint_style_mixin.dart';
import '../../style/mixins/decoration_style_mixin.dart';
import '../../style/mixins/shadow_style_mixin.dart';
import '../../style/mixins/spacing_style_mixin.dart';
import '../../style/mixins/token_style_mixin.dart';
import '../../style/mixins/transform_style_mixin.dart';
import '../box/box_spec.dart';
import '../box/box_style.dart';
Expand Down Expand Up @@ -51,6 +52,7 @@ class StackBoxStyler extends MixStyler<StackBoxStyler, StackBoxSpec>
SpacingStyleMixin<StackBoxStyler>,
TransformStyleMixin<StackBoxStyler>,
ConstraintStyleMixin<StackBoxStyler>,
TokenStyleMixin<StackBoxStyler, StackBoxSpec>,
_$StackBoxStylerMixin {
@override
final Prop<StyleSpec<BoxSpec>>? $box;
Expand Down
3 changes: 2 additions & 1 deletion packages/mix/lib/src/specs/text/text_style.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import '../../properties/typography/text_height_behavior_mix.dart';
import '../../properties/typography/text_style_mix.dart';
import '../../style/abstracts/styler.dart';
import '../../style/mixins/text_style_mixin.dart';
import '../../style/mixins/token_style_mixin.dart';
import 'text_mutable_style.dart';
import 'text_spec.dart';
import 'text_widget.dart';
Expand All @@ -32,7 +33,7 @@ typedef TextMix = TextStyler;
/// the [TextSpec] constructor.
@MixableStyler()
class TextStyler extends MixStyler<TextStyler, TextSpec>
with TextStyleMixin<TextStyler>, _$TextStylerMixin {
with TextStyleMixin<TextStyler>, TokenStyleMixin<TextStyler, TextSpec>, _$TextStylerMixin {
@override
final Prop<TextOverflow>? $overflow;
@override
Expand Down
31 changes: 31 additions & 0 deletions packages/mix/lib/src/style/mixins/token_style_mixin.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import '../../core/spec.dart';
import '../../core/style.dart';
import '../../theme/tokens/mix_token.dart';
import 'variant_style_mixin.dart';

mixin TokenStyleMixin<T extends Style<S>, S extends Spec<S>>
on VariantStyleMixin<T, S> {
/// Applies styling based on a resolved [MixToken] value.
///
/// The [token] is resolved against the current [BuildContext] at runtime,
/// and the given [builder] function is used to produce a style based on the value.
///
/// Example:
/// ```dart
/// BoxStyler()
/// .useToken($primary, BoxStyler().color);
/// ```
///
/// ```dart
/// BoxStyler()
/// .useToken($primary, (color) => BoxStyler().color(color));
/// ```
///
/// This enables context-aware design tokens (such as colors or spacing)
/// to drive dynamic styling, including theming and design system integration.
T useToken<U>(MixToken<U> token, T Function(U value) builder) {
return onBuilder((context) {
return builder(token.resolve(context));
});
}
}
26 changes: 13 additions & 13 deletions packages/mix/lib/src/style/mixins/variant_style_mixin.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,19 +94,19 @@ mixin VariantStyleMixin<T extends Style<S>, S extends Spec<S>> on Style<S> {
}

/// Creates a variant for mobile breakpoint.
T onMobile(T style) {
return variant(ContextVariant.mobile(), style);
}

/// Creates a variant for tablet breakpoint.
T onTablet(T style) {
return variant(ContextVariant.tablet(), style);
}

/// Creates a variant for desktop breakpoint.
T onDesktop(T style) {
return variant(ContextVariant.desktop(), style);
}
// T onMobile(T style) {
// return variant(ContextVariant.mobile(), style);
// }

// /// Creates a variant for tablet breakpoint.
// T onTablet(T style) {
// return variant(ContextVariant.tablet(), style);
// }

// /// Creates a variant for desktop breakpoint.
// T onDesktop(T style) {
// return variant(ContextVariant.desktop(), style);
// }

/// Creates a variant for left-to-right text direction.
T onLtr(T style) {
Expand Down
6 changes: 0 additions & 6 deletions packages/mix/lib/src/theme/tokens/mix_token.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:flutter/material.dart';

import '../mix_theme.dart';
import 'token_refs.dart';

/// A design token that resolves to a value within a Mix theme.
///
Expand All @@ -12,11 +11,6 @@ abstract class MixToken<T> {
final String name;
const MixToken(this.name);

/// Returns a reference value for Mix utilities.
T call() {
return getReferenceValue(this);
}

/// Resolves this token to a concrete value.
T resolve(BuildContext context) {
return MixScope.tokenOf(this, context);
Expand Down
7 changes: 0 additions & 7 deletions packages/mix/lib/src/theme/tokens/value_tokens.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

import '../../core/breakpoint.dart';
import '../../core/prop.dart';
import '../../core/prop_refs.dart';
import 'mix_token.dart';
import 'token_refs.dart';

Expand All @@ -14,7 +13,7 @@
const ColorToken(super.name);

@override
ColorRef call() => .new(Prop.token(this));

Check warning on line 16 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for [Radius] values.
Expand All @@ -22,23 +21,17 @@
const RadiusToken(super.name);

@override
RadiusRef call() => .new(Prop.token(this));

Check warning on line 24 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for spacing values.
class SpaceToken extends MixToken<double> {
const SpaceToken(super.name);

@override
double call() => DoubleRef.token(this);
}

/// Design token for general [double] values.
class DoubleToken extends MixToken<double> {
const DoubleToken(super.name);

@override
double call() => DoubleRef.token(this);
}

/// Design token for [Breakpoint] values.
Expand All @@ -50,7 +43,7 @@
const BreakpointToken(super.name);

@override
BreakpointRef call() => .new(this);

Check warning on line 46 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.

@override
Breakpoint resolve(BuildContext context) {
Expand Down Expand Up @@ -79,7 +72,7 @@
TextStyleMixRef mix() => .new(Prop.token(this));

@override
TextStyleRef call() => .new(Prop.token(this));

Check warning on line 75 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for [BorderSide] values.
Expand All @@ -87,7 +80,7 @@
const BorderSideToken(super.name);

@override
BorderSideRef call() => .new(Prop.token(this));

Check failure on line 83 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The static method or constructor 'new' isn't defined for the context type 'InvalidType'. 

Try correcting the name to the name of an existing static method or constructor, or defining a static method or constructor named 'new'.
See https://dart.dev/diagnostics/dot_shorthand_undefined_member to learn more about this problem.

Check failure on line 83 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

Undefined class 'BorderSideRef'. 

Try changing the name to the name of an existing class, or creating a class with the name 'BorderSideRef'.
See https://dart.dev/diagnostics/undefined_class to learn more about this problem.

Check warning on line 83 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for shadow lists.
Expand All @@ -98,7 +91,7 @@
ShadowListMixRef mix() => .new(Prop.token(this));

@override
ShadowListRef call() => .new(Prop.token(this));

Check warning on line 94 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for box shadow lists.
Expand All @@ -109,7 +102,7 @@
BoxShadowListMixRef mix() => .new(Prop.token(this));

@override
BoxShadowListRef call() => .new(Prop.token(this));

Check warning on line 105 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for [FontWeight] values.
Expand All @@ -117,7 +110,7 @@
const FontWeightToken(super.name);

@override
FontWeightRef call() => .new(Prop.token(this));

Check failure on line 113 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The static method or constructor 'new' isn't defined for the context type 'InvalidType'. 

Try correcting the name to the name of an existing static method or constructor, or defining a static method or constructor named 'new'.
See https://dart.dev/diagnostics/dot_shorthand_undefined_member to learn more about this problem.

Check failure on line 113 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

Undefined class 'FontWeightRef'. 

Try changing the name to the name of an existing class, or creating a class with the name 'FontWeightRef'.
See https://dart.dev/diagnostics/undefined_class to learn more about this problem.

Check warning on line 113 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}

/// Design token for [Duration] values.
Expand All @@ -125,5 +118,5 @@
const DurationToken(super.name);

@override
DurationRef call() => .new(Prop.token(this));

Check failure on line 121 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The static method or constructor 'new' isn't defined for the context type 'InvalidType'. 

Try correcting the name to the name of an existing static method or constructor, or defining a static method or constructor named 'new'.
See https://dart.dev/diagnostics/dot_shorthand_undefined_member to learn more about this problem.

Check failure on line 121 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

Undefined class 'DurationRef'. 

Try changing the name to the name of an existing class, or creating a class with the name 'DurationRef'.
See https://dart.dev/diagnostics/undefined_class to learn more about this problem.

Check warning on line 121 in packages/mix/lib/src/theme/tokens/value_tokens.dart

View workflow job for this annotation

GitHub Actions / Test / Run tests for all packages

The method doesn't override an inherited method. 

Try updating this class to match the superclass, or removing the override annotation.
See https://dart.dev/diagnostics/override_on_non_overriding_member to learn more about this problem.
}
21 changes: 10 additions & 11 deletions packages/mix/lib/src/variants/variant.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import '../core/providers/widget_state_provider.dart';
import '../core/spec.dart';
import '../core/style.dart';
import '../theme/tokens/token_refs.dart';
import '../theme/tokens/value_tokens.dart';

/// Base class for all variant types.
@immutable
Expand Down Expand Up @@ -115,18 +114,18 @@ class ContextVariant extends Variant {
return ContextVariant('web', (_) => kIsWeb);
}

// Responsive breakpoints
static ContextVariant mobile() {
return ContextVariant.breakpoint(BreakpointToken.mobile());
}
// // Responsive breakpoints
// static ContextVariant mobile() {
// return ContextVariant.breakpoint(BreakpointToken.mobile());
// }

static ContextVariant tablet() {
return ContextVariant.breakpoint(BreakpointToken.tablet());
}
// static ContextVariant tablet() {
// return ContextVariant.breakpoint(BreakpointToken.tablet());
// }

static ContextVariant desktop() {
return ContextVariant.breakpoint(BreakpointToken.desktop());
}
// static ContextVariant desktop() {
// return ContextVariant.breakpoint(BreakpointToken.desktop());
// }

/// Check if this variant should be active for the given context
bool when(BuildContext context) {
Expand Down
26 changes: 13 additions & 13 deletions packages/mix/lib/src/variants/variant_util.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,19 @@ class OnContextVariantUtility<S extends Spec<S>, T extends Style<S>>
}

/// Creates a variant attribute for mobile size
VariantAttributeBuilder<S> get mobile {
return VariantAttributeBuilder(ContextVariant.mobile());
}

/// Creates a variant attribute for tablet size
VariantAttributeBuilder<S> get tablet {
return VariantAttributeBuilder(ContextVariant.tablet());
}

/// Creates a variant attribute for desktop size
VariantAttributeBuilder<S> get desktop {
return VariantAttributeBuilder(ContextVariant.desktop());
}
// VariantAttributeBuilder<S> get mobile {
// return VariantAttributeBuilder(ContextVariant.mobile());
// }

// /// Creates a variant attribute for tablet size
// VariantAttributeBuilder<S> get tablet {
// return VariantAttributeBuilder(ContextVariant.tablet());
// }

// /// Creates a variant attribute for desktop size
// VariantAttributeBuilder<S> get desktop {
// return VariantAttributeBuilder(ContextVariant.desktop());
// }

/// Creates a variant attribute for left-to-right direction
VariantAttributeBuilder<S> get ltr {
Expand Down
Loading
Loading