Design Tokens

Symbols that are able to reference values within the BuildContext.

• Use Material Theme values within any Mix (even outside of BuildContext)
• Define dynamic BuildContext values that want to reuse throughout the app.
• Dynamically changing the accent color of the app

Design Tokens are made of references (MixToken), which can be read by Mix at run time. There are a lot of built-in context design tokens already available for usage, from colors to text:

For example, if you want to create a button with the primary color, you can use bgColor($primary):

Mix get style => Mix(
  textStyle($body2), // Text theme from Material Theme
  bgColor($primary), // use the primary color from Material Theme
  (hover)(
    bgColor($secondary), // when hovering, use the secondary color
  ),
);

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Pressable( // call your button
      mix: style,
      child: const TextMix('Details'),
      onPressed: () {},
    );
  }
}

Material Theme Tokens#

The built-in context references you can use on your app. They are based on the material theme:

Text Theme#

Material 2

• $h1, $h2, $h3, $h4, $h5, $h6
• $subtitle1, $subtitle2
• $body1, $body1
• $caption, $button, $overline

Material 3

• $displaySmall, $displayMedium, $displayLarge
• $headlineSmall, $headlineMedium, $headlineLarge
• $titleSmall, $titleMedium, $titleLarge
• $bodySmall, $bodyMedium, $bodyLarge
• $labelSmall, $labelMedium, $labelLarge

Color Scheme#

• $primary, $secondary, $surface, $background, $error
• $onPrimary, $onSecondary, $onSurface, $onBackground, $onError
• colorScheme: returns all the colors above

Creating New Design Tokens#

First, define a call to that reference. It'll be used by the attributes at build time. It usually starts with a dollar sign ($):

const $myColor = ColorRef('myColor');

Then, define it on your MixThemeData:

MixTheme(
  data: MixThemeData(
    designTokens: {
      $myColor: (BuildContext context) {
        final brightness = Theme.of(context).brightness;
        if (brightness == Brightness.light) {
          return Colors.black;
        } else {
          return Colors.white;
        }
      }
    }
  ),
  child: ...,
),

Finally, use it a Mix:

final myMix = Mix(
  bgColor($myColor),
);