FlutterArtist Themes

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