Skip to main content

Mix Tokens Design System

Overview​

This file implements a centralized design token system for Flutter applications. The Tokens class provides a robust interface for managing and accessing design tokens including colors, typography, spacing, and breakpoints.

Core Components​

Widget Types​

enum WidgetType { header, card, section, view, title }

Typography​

  • Font Family: Accessible via Tokens.fontFamilyPrimary
  • Text Sizes: 
    {
      'xs': Foun.kSmall,
      's': Foun.kSmall,
      'm': Foun.kMedium,
      'l': Foun.kLarge,
      'xl': Foun.kXLarge,
    }

Layout​

  • Breakpoints: Mobile max width
  • Header Heights: Separate values for web and mobile
  • Padding: Dynamic calculation based on screen width
  • Border Radius: Base radius value

Color System​

Primary Colors​

  • primary
  • onPrimary
  • primaryContainer
  • onPrimaryContainer

Surface Colors​

  • surface
  • onSurface
  • surfaceVariant
  • onSurfaceVariant

Background Colors​

  • background
  • onBackground

Inverse Colors​

  • inverseSurface
  • onInverseSurface
  • inversePrimary

Outline & Effects​

  • outline
  • shadow
  • scrim

Secondary Colors​

  • secondary
  • onSecondary
  • secondaryContainer
  • onSecondaryContainer

Tertiary Colors​

  • tertiary
  • onTertiary
  • tertiaryContainer
  • onTertiaryContainer

Error Colors​

  • error
  • onError
  • errorContainer
  • onErrorContainer

Usage Examples​

Typography​

final fontFamily = Tokens.fontFamilyPrimary;
final mediumSize = Tokens.textSizes['m'];

Responsive Layout​

final padding = Tokens.getPadding(screenWidth);
final isDesktop = screenWidth > Tokens.breakpointMobileMaxWidth;

Colors​

final primaryColor = Tokens.primary;
final backgroundColor = Tokens.background;
final errorState = Tokens.error;

Architecture Notes​

  • Uses private static fields with public getters
  • All values initialized from Foun class
  • Responsive padding calculation based on screen width
  • Color system follows Material Design conventions

Important Note​

The WidgetType enum is critical for core widget styling and must not be modified.