Docs
/
Theme
/
Design Tokens

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),
);