feat: add TokenStyleMixin with useToken method

packages/mix/lib/src/specs/box/box_style.dart

@@ -19,6 +19,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 '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
@@ -48,7 +49,8 @@ class BoxStyler extends Style<BoxSpec>
         SpacingStyleMixin<BoxStyler>,
         TransformStyleMixin<BoxStyler>,
         ConstraintStyleMixin<BoxStyler>,
-        AnimationStyleMixin<BoxStyler, BoxSpec> {
+        AnimationStyleMixin<BoxStyler, BoxSpec>,
+        TokenStyleMixin<BoxStyler, BoxSpec> {
   final Prop<AlignmentGeometry>? $alignment;
   final Prop<EdgeInsetsGeometry>? $padding;
   final Prop<EdgeInsetsGeometry>? $margin;

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

@@ -10,6 +10,7 @@ import '../../core/style_spec.dart';
 import '../../modifiers/widget_modifier_config.dart';
 import '../../style/mixins/animation_style_mixin.dart';
 import '../../style/mixins/flex_style_mixin.dart';
+import '../../style/mixins/token_style_mixin.dart';
 import '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
 import '../../style/mixins/widget_state_variant_mixin.dart';
@@ -34,7 +35,8 @@ class FlexStyler extends Style<FlexSpec>
         VariantStyleMixin<FlexStyler, FlexSpec>,
         WidgetStateVariantMixin<FlexStyler, FlexSpec>,
         FlexStyleMixin<FlexStyler>,
-        AnimationStyleMixin<FlexStyler, FlexSpec> {
+        AnimationStyleMixin<FlexStyler, FlexSpec>,
+        TokenStyleMixin<FlexStyler, FlexSpec> {
   final Prop<Axis>? $direction;
   final Prop<MainAxisAlignment>? $mainAxisAlignment;
   final Prop<CrossAxisAlignment>? $crossAxisAlignment;

packages/mix/lib/src/specs/flexbox/flexbox_style.dart

@@ -12,14 +12,15 @@ import '../../properties/layout/edge_insets_geometry_mix.dart';
 import '../../properties/painting/border_mix.dart';
 import '../../properties/painting/border_radius_mix.dart';
 import '../../properties/painting/decoration_mix.dart';
+import '../../style/mixins/animation_style_mixin.dart';
 import '../../style/mixins/border_radius_style_mixin.dart';
 import '../../style/mixins/border_style_mixin.dart';
 import '../../style/mixins/constraint_style_mixin.dart';
 import '../../style/mixins/decoration_style_mixin.dart';
-import '../../style/mixins/animation_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 '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
@@ -56,7 +57,8 @@ class FlexBoxStyler extends Style<FlexBoxSpec>
         TransformStyleMixin<FlexBoxStyler>,
         ConstraintStyleMixin<FlexBoxStyler>,
         FlexStyleMixin<FlexBoxStyler>,
-        AnimationStyleMixin<FlexBoxStyler, FlexBoxSpec> {
+        AnimationStyleMixin<FlexBoxStyler, FlexBoxSpec>,
+        TokenStyleMixin<FlexBoxStyler, FlexBoxSpec> {
   final Prop<StyleSpec<BoxSpec>>? $box;
   final Prop<StyleSpec<FlexSpec>>? $flex;
 
@@ -131,12 +133,6 @@ class FlexBoxStyler extends Style<FlexBoxSpec>
   static FlexBoxMutableStyler get chain =>
       FlexBoxMutableStyler(FlexBoxStyler());
 
-  /// Sets the animation property.
-  @override
-  FlexBoxStyler animate(AnimationConfig animation) {
-    return merge(FlexBoxStyler(animation: animation));
-  }
-
   // BoxMix instance methods
 
   /// Sets the alignment property.
@@ -173,6 +169,12 @@ class FlexBoxStyler extends Style<FlexBoxSpec>
     return FlexBox(key: key, style: this, children: children);
   }
 
+  /// Sets the animation property.
+  @override
+  FlexBoxStyler animate(AnimationConfig animation) {
+    return merge(FlexBoxStyler(animation: animation));
+  }
+
   /// Sets the foreground decoration.
   @override
   FlexBoxStyler foregroundDecoration(DecorationMix value) {

packages/mix/lib/src/specs/icon/icon_style.dart

@@ -9,6 +9,7 @@ import '../../core/style_spec.dart';
 import '../../modifiers/widget_modifier_config.dart';
 import '../../properties/painting/shadow_mix.dart';
 import '../../style/mixins/animation_style_mixin.dart';
+import '../../style/mixins/token_style_mixin.dart';
 import '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
 import '../../style/mixins/widget_state_variant_mixin.dart';
@@ -25,7 +26,8 @@ class IconStyler extends Style<IconSpec>
         WidgetModifierStyleMixin<IconStyler, IconSpec>,
         VariantStyleMixin<IconStyler, IconSpec>,
         WidgetStateVariantMixin<IconStyler, IconSpec>,
-        AnimationStyleMixin<IconStyler, IconSpec> {
+        AnimationStyleMixin<IconStyler, IconSpec>,
+        TokenStyleMixin<IconStyler, IconSpec> {
   final Prop<Color>? $color;
   final Prop<double>? $size;
   final Prop<double>? $weight;

packages/mix/lib/src/specs/image/image_style.dart

@@ -8,6 +8,7 @@ import '../../core/style.dart';
 import '../../core/style_spec.dart';
 import '../../modifiers/widget_modifier_config.dart';
 import '../../style/mixins/animation_style_mixin.dart';
+import '../../style/mixins/token_style_mixin.dart';
 import '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
 import '../../style/mixins/widget_state_variant_mixin.dart';
@@ -24,7 +25,8 @@ class ImageStyler extends Style<ImageSpec>
         WidgetModifierStyleMixin<ImageStyler, ImageSpec>,
         VariantStyleMixin<ImageStyler, ImageSpec>,
         WidgetStateVariantMixin<ImageStyler, ImageSpec>,
-        AnimationStyleMixin<ImageStyler, ImageSpec> {
+        AnimationStyleMixin<ImageStyler, ImageSpec>,
+        TokenStyleMixin<ImageStyler, ImageSpec> {
   final Prop<ImageProvider<Object>>? $image;
   final Prop<double>? $width;
   final Prop<double>? $height;

packages/mix/lib/src/specs/stack/stack_style.dart

@@ -8,6 +8,7 @@ import '../../core/style.dart';
 import '../../core/style_spec.dart';
 import '../../modifiers/widget_modifier_config.dart';
 import '../../style/mixins/animation_style_mixin.dart';
+import '../../style/mixins/token_style_mixin.dart';
 import '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
 import '../../style/mixins/widget_state_variant_mixin.dart';
@@ -30,7 +31,8 @@ class StackStyler extends Style<StackSpec>
         WidgetModifierStyleMixin<StackStyler, StackSpec>,
         VariantStyleMixin<StackStyler, StackSpec>,
         WidgetStateVariantMixin<StackStyler, StackSpec>,
-        AnimationStyleMixin<StackStyler, StackSpec> {
+        AnimationStyleMixin<StackStyler, StackSpec>,
+        TokenStyleMixin<StackStyler, StackSpec> {
   final Prop<AlignmentGeometry>? $alignment;
   final Prop<StackFit>? $fit;
   final Prop<TextDirection>? $textDirection;

packages/mix/lib/src/specs/stackbox/stackbox_style.dart

@@ -19,6 +19,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 '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
@@ -54,7 +55,8 @@ class StackBoxStyler extends Style<StackBoxSpec>
         SpacingStyleMixin<StackBoxStyler>,
         TransformStyleMixin<StackBoxStyler>,
         ConstraintStyleMixin<StackBoxStyler>,
-        AnimationStyleMixin<StackBoxStyler, StackBoxSpec> {
+        AnimationStyleMixin<StackBoxStyler, StackBoxSpec>,
+        TokenStyleMixin<StackBoxStyler, StackBoxSpec> {
   final Prop<StyleSpec<BoxSpec>>? $box;
   final Prop<StyleSpec<StackSpec>>? $stack;
 
@@ -119,12 +121,6 @@ class StackBoxStyler extends Style<StackBoxSpec>
   static StackBoxMutableStyler get chain =>
       StackBoxMutableStyler(StackBoxStyler());
 
-  /// Sets animation
-  @override
-  StackBoxStyler animate(AnimationConfig animation) {
-    return merge(StackBoxStyler(animation: animation));
-  }
-
   // BoxMix instance methods
 
   /// Sets the alignment for the box.
@@ -177,6 +173,12 @@ class StackBoxStyler extends Style<StackBoxSpec>
     return merge(StackBoxStyler.create(stack: Prop.maybeMix(value)));
   }
 
+  /// Sets animation
+  @override
+  StackBoxStyler animate(AnimationConfig animation) {
+    return merge(StackBoxStyler(animation: animation));
+  }
+
   /// Foreground decoration instance method
   @override
   StackBoxStyler foregroundDecoration(DecorationMix value) {

packages/mix/lib/src/specs/text/text_style.dart

@@ -13,6 +13,7 @@ import '../../properties/typography/text_height_behavior_mix.dart';
 import '../../properties/typography/text_style_mix.dart';
 import '../../style/mixins/animation_style_mixin.dart';
 import '../../style/mixins/text_style_mixin.dart';
+import '../../style/mixins/token_style_mixin.dart';
 import '../../style/mixins/variant_style_mixin.dart';
 import '../../style/mixins/widget_modifier_style_mixin.dart';
 import '../../style/mixins/widget_state_variant_mixin.dart';
@@ -37,7 +38,8 @@ class TextStyler extends Style<TextSpec>
         VariantStyleMixin<TextStyler, TextSpec>,
         WidgetStateVariantMixin<TextStyler, TextSpec>,
         TextStyleMixin<TextStyler>,
-        AnimationStyleMixin<TextStyler, TextSpec> {
+        AnimationStyleMixin<TextStyler, TextSpec>,
+        TokenStyleMixin<TextStyler, TextSpec> {
   final Prop<TextOverflow>? $overflow;
   final Prop<StrutStyle>? $strutStyle;
   final Prop<TextAlign>? $textAlign;

packages/mix/lib/src/style/mixins/token_style_mixin.dart

@@ -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));
+    });
+  }
+}

packages/mix/lib/src/style/mixins/variant_style_mixin.dart

@@ -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) {

packages/mix/lib/src/theme/tokens/mix_token.dart

@@ -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.
 ///
@@ -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);

packages/mix/lib/src/theme/tokens/value_tokens.dart

@@ -5,40 +5,27 @@ import 'package:flutter/material.dart';
 
 import '../../core/breakpoint.dart';
 import '../../core/prop.dart';
-import '../../core/prop_refs.dart';
 import 'mix_token.dart';
 import 'token_refs.dart';
 
 /// Design token for [Color] values.
 class ColorToken extends MixToken<Color> {
   const ColorToken(super.name);
-
-  @override
-  ColorRef call() => ColorRef(Prop.token(this));
 }
 
 /// Design token for [Radius] values.
 class RadiusToken extends MixToken<Radius> {
   const RadiusToken(super.name);
-
-  @override
-  RadiusRef call() => RadiusRef(Prop.token(this));
 }
 
 /// 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.
@@ -49,9 +36,6 @@ class BreakpointToken extends MixToken<Breakpoint> {
 
   const BreakpointToken(super.name);
 
-  @override
-  BreakpointRef call() => BreakpointRef(this);
-
   @override
   Breakpoint resolve(BuildContext context) {
     try {
@@ -77,17 +61,11 @@ class TextStyleToken extends MixToken<TextStyle> {
 
   /// Returns a Mix framework compatible reference for use with Mix styling utilities.
   TextStyleMixRef mix() => TextStyleMixRef(Prop.token(this));
-
-  @override
-  TextStyleRef call() => TextStyleRef(Prop.token(this));
 }
 
 /// Design token for [BorderSide] values.
 class BorderSideToken extends MixToken<BorderSide> {
   const BorderSideToken(super.name);
-
-  @override
-  BorderSideRef call() => BorderSideRef(Prop.token(this));
 }
 
 /// Design token for shadow lists.
@@ -96,9 +74,6 @@ class ShadowToken extends MixToken<List<Shadow>> {
 
   /// Returns a Mix framework compatible reference for use with Mix styling utilities.
   ShadowListMixRef mix() => ShadowListMixRef(Prop.token(this));
-
-  @override
-  ShadowListRef call() => ShadowListRef(Prop.token(this));
 }
 
 /// Design token for box shadow lists.
@@ -107,23 +82,14 @@ class BoxShadowToken extends MixToken<List<BoxShadow>> {
 
   /// Returns a Mix framework compatible reference for use with Mix styling utilities.
   BoxShadowListMixRef mix() => BoxShadowListMixRef(Prop.token(this));
-
-  @override
-  BoxShadowListRef call() => BoxShadowListRef(Prop.token(this));
 }
 
 /// Design token for [FontWeight] values.
 class FontWeightToken extends MixToken<FontWeight> {
   const FontWeightToken(super.name);
-
-  @override
-  FontWeightRef call() => FontWeightRef(Prop.token(this));
 }
 
 /// Design token for [Duration] values.
 class DurationToken extends MixToken<Duration> {
   const DurationToken(super.name);
-
-  @override
-  DurationRef call() => DurationRef(Prop.token(this));
 }