FlutterArtist Theme Design Tokens Architecture

class CustomFaTheme extends FaTheme { 
  @override 
  String get name => "Artist Midnight";  

  @override 
  IconData get icon => Icons.dark_mode_outlined; 

  @override 
  Color get seedColor => const Color(0xFF1A237E);   

  @override 
  Brightness get brightness => Brightness.dark;  

  @override 
  String? get fontFamily => 'Inter'; 

  @override 
  FaThemeTokens createThemeTokens() { 
      // ....
  } 
} 

class FaThemeTokens extends ThemeExtension<FaThemeTokens> {
  final FaColorTokens colors;
  final FaSpacingTokens spacing;
  final FaRadiusTokens radius;
  final FaElevationTokens elevation;
  final FaTypographyTokens typography;
  final FaComponentTokens components;
  final FaLayoutTokens layout;
  final FaMotionTokens motion;
 

  FaThemeTokens({
    required this.colors,
    required this.spacing,
    required this.radius,
    required this.elevation,
    required this.typography,
    required this.components,
    required this.layout,
    required this.motion,
  });

  // ...
}  

class FaColorTokens {
  final Brightness brightness;

  final Color? divider;
  final Color primary;
  final Color onPrimary;
  final Color secondary;
  final Color onSecondary;

  final Color error;
  final Color onError;

  final Color background;
  final Color surface; 
  final Color onSurface;
  final Color onSurfaceVariant;

  final Color surfaceContainerLowest;
  final Color surfaceContainerLow;
  final Color surfaceContainer;
  final Color surfaceContainerHigh;
  final Color surfaceContainerHighest;

  final Color textPrimary;
  final Color textSecondary; 
  final Color border;
  final Color outlineVariant; 
  final Color tertiary;
  final Color onTertiary; 
  final Color outline; 
  final Color shadow;
  final Color scrim; 
  final Color inverseSurface;
  final Color onInverseSurface;
  final Color inversePrimary;

  const FaColorTokens({
    required this.brightness,
    required this.primary,
    required this.onPrimary, 
    // ...
  });

  factory FaColorTokens.fromSeed(Color seed) {
    final scheme = ColorScheme.fromSeed(seedColor: seed);

    return FaColorTokens(
      brightness: scheme.brightness, 
      primary: scheme.primary,
      onPrimary: scheme.onPrimary,
      // ...
    );
  }
}

// Standard way to access colors 
final Color primaryColor = Theme.of(context).colorScheme.primary;
final Color textColorOnPrimary = Theme.of(context).colorScheme.onPrimary;

// Everything works perfectly with your custom overrides! 

class FaTypographyTokens {
  // --- DISPLAY ---
  final TextStyle? displayLarge;
  final TextStyle? displayMedium;
  final TextStyle? displaySmall;

  // --- HEADLINE ---
  final TextStyle? headlineLarge;
  final TextStyle? headlineMedium;
  final TextStyle? headlineSmall;

  // --- TITLE
  final TextStyle? titleLarge;
  final TextStyle? titleMedium;
  final TextStyle? titleSmall;

  // --- BODY
  final TextStyle? bodyLarge;
  final TextStyle? bodyMedium;
  final TextStyle? bodySmall;

  // --- LABEL ---
  final TextStyle? labelLarge;
  final TextStyle? labelMedium;
  final TextStyle? labelSmall;
}  

// Standard Flutter way to access your custom styles 
Text(
  "Hello FlutterArtist",
  style: Theme.of(context).textTheme.titleLarge,
);

class FaButtonTokens {
  final double height;
  final double radius;

  const FaButtonTokens({this.height = 40, this.radius = 8});
}

// The FlutterArtist way
ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(0, context.faTokens.components.button.height),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(context.faTokens.components.button.radius),
    ),
  ),
  onPressed: () {},
  child: const Text("Click Me"),
)

class FaCardTokens { 
  final double radius;   
  final double padding;  
  
  const FaCardTokens({this.radius = 12, this.padding = 16}); 
}

// Implementing a perfectly standardized Card 
Container(
  padding: EdgeInsets.all(context.faTokens.components.card.padding),
  decoration: BoxDecoration(
    color: context.faTokens.colors.surface,
    borderRadius: BorderRadius.circular(context.faTokens.components.card.radius),
    boxShadow: context.faTokens.shortcut.cardShadows,  
  ),
  child: const Text("Artist Content"),
)

class FaComponentTokens {
  final FaButtonTokens button;
  final FaCardTokens card;

  const FaComponentTokens({
    this.button = const FaButtonTokens(),
    this.card = const FaCardTokens(),
  });
}

class FaLayoutTokens {
  final FaLayoutMetricsTokens metrics;
  final FaLayoutColorTokens colors;

  const FaLayoutTokens({
    this.metrics = const FaLayoutMetricsTokens(),
    required this.colors,
  });
}

class FaLayoutColorTokens {
  final Color sidebarSurface;
  final Color onSidebarSurface;

  final Color topbarSurface;
  final Color onTopbarSurface;

  const FaLayoutColorTokens({
    required this.sidebarSurface,
    required this.onSidebarSurface,
    required this.topbarSurface,
    required this.onTopbarSurface,
  });

  factory FaLayoutColorTokens.fromColorTokens(FaColorTokens colors) {
    return FaLayoutColorTokens(
      sidebarSurface: colors.surfaceContainerLow,
      onSidebarSurface: colors.onSurface,
      topbarSurface: colors.surface,
      onTopbarSurface: colors.onSurface,
    );
  }
}

// Applying to a custom Sidebar 
Container(
  color: context.faTokens.layout.colors.sidebarSurface,
  child: Icon(
    Icons.menu,
    color: context.faTokens.layout.colors.onSidebarSurface,
  ),
)

// Setting Sidebar width dynamically from Tokens 
SizedBox(
  width: context.faTokens.layout.metrics.sidebarWidth,
  child: const AppSidebar(),
) 
// Applying max width for web layouts 
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: context.faTokens.layout.metrics.contentMaxWidth ?? double.infinity,
  ),
  child: const MainFeed(),
)

class FaMotionTokens {
  final Duration fast;
  final Duration normal;
  final Duration slow;

  final Curve standard;
  final Curve emphasized;

  const FaMotionTokens({
    this.fast = const Duration(milliseconds: 120),
    this.normal = const Duration(milliseconds: 220),
    this.slow = const Duration(milliseconds: 360),
    this.standard = Curves.easeOut,
    this.emphasized = Curves.easeInOut,
  });
}

// Implementing a smooth animated container 
AnimatedContainer(
  duration: context.faTokens.motion.normal,
  curve: context.faTokens.motion.standard,
  color: isSelected 
      ? Theme.of(context).colorScheme.primary  
      : Theme.of(context).colorScheme.surface,
  child: const MyWidget(),
)

class FaSpacingTokens {
  final double xs; // Extra S 
  final double sm;
  final double md;
  final double lg;
  final double xl;

  const FaSpacingTokens({
    this.xs = 4,
    this.sm = 8,
    this.md = 16,
    this.lg = 24,
    this.xl = 32,
  });
}

// Using spacing tokens for a consistent layout 
Column(
  children: [
    Text("Title", style: context.faTokens.shortcut.titleMedium),
    SizedBox(height: context.faTokens.spacing.sm), // Gap of 8px
    Text("Content text...", style: context.faTokens.shortcut.bodyMedium),
    Padding(
      padding: EdgeInsets.all(context.faTokens.spacing.md), // Padding 16px
      child: const MyActionCard(),
    ),
  ],
)

class FaRadiusTokens { 
  final double sm; // Small (e.g., 4px)
  final double md; // Medium (e.g., 8px)
  final double lg; // Large (e.g., 12px)
  final double xl; // Extra Large (e.g., 16px)

  const FaRadiusTokens({this.sm = 4, this.md = 8, this.lg = 12, this.xl = 16}); 

  // Default value used for general components
  double get borderRadius => md; 
}

// Applying radius tokens for a customized container 
Container(
  decoration: BoxDecoration(
    color: context.faTokens.colors.surface,
    // Using the 'large' radius for a softer look
    borderRadius: BorderRadius.circular(context.faTokens.radius.lg),
  ),
  child: const MyWidget(),
)

class FaElevationTokens {
  final double level1;
  final double level2;
  final double level3;

  const FaElevationTokens({this.level1 = 1, this.level2 = 3, this.level3 = 6});

  double get buttonElevation => level2;

  double get defaultValue => level2;
}

// Using elevation tokens for a floating effect 
Material(
  elevation: context.faTokens.elevation.level3, // High elevation for a dialog
  borderRadius: BorderRadius.circular(context.faTokens.radius.lg),
  child: const MyDialogContent(),
)