todos-contra-el-fuego-mobile/lib/theme_dev.dart

import 'package:flutter/material.dart';

import 'colors.dart';

// ignore_for_file: avoid_redundant_argument_values
final ThemeData devFiresTheme = _buildFiresTheme();

ThemeData _buildFiresTheme() {
  // Material 3 Color Scheme - Development Theme with Pink Primary
  // Uses pink for easy visual identification of dev builds
  const ColorScheme colorScheme = ColorScheme.light(
    primary: m3DevPrimary,
    onPrimary: m3DevOnPrimary,
    primaryContainer: m3DevPrimaryContainer,
    onPrimaryContainer: m3DevOnPrimaryContainer,
    secondary: m3Secondary,
    onSecondary: m3OnSecondary,
    secondaryContainer: m3SecondaryContainer,
    onSecondaryContainer: m3OnSecondaryContainer,
    tertiary: m3Tertiary,
    onTertiary: m3OnTertiary,
    tertiaryContainer: m3TertiaryContainer,
    onTertiaryContainer: m3OnTertiaryContainer,
    error: m3Error,
    onError: m3OnError,
    errorContainer: m3ErrorContainer,
    onErrorContainer: m3OnErrorContainer,
    surface: m3Surface,
    onSurface: m3OnSurface,
    surfaceContainerHighest: m3SurfaceVariant,
    onSurfaceVariant: m3OnSurfaceVariant,
    outline: m3Outline,
    outlineVariant: m3OutlineVariant,
  );

  return ThemeData(
    useMaterial3: true,
    colorScheme: colorScheme,
    scaffoldBackgroundColor: m3Surface,
    cardColor: m3Surface,

    // ========================================================================
    // TEXT THEMES - Material 3 Complete
    // ========================================================================
    textTheme: TextTheme(
      // Display styles - Large, prominent text
      displayLarge: TextStyle(
        fontSize: 57,
        fontWeight: FontWeight.w400,
        letterSpacing: -0.25,
        color: colorScheme.onSurface,
      ),
      displayMedium: TextStyle(
        fontSize: 45,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),
      displaySmall: TextStyle(
        fontSize: 36,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),

      // Headline styles - Important section titles
      headlineLarge: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.w600,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),
      headlineMedium: TextStyle(
        fontSize: 28,
        fontWeight: FontWeight.w600,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),
      headlineSmall: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.w600,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),

      // Title styles - Subheadings
      titleLarge: TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.w500,
        letterSpacing: 0,
        color: colorScheme.onSurface,
      ),
      titleMedium: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.15,
        color: colorScheme.onSurface,
      ),
      titleSmall: TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.1,
        color: colorScheme.onSurface,
      ),

      // Body styles - Main content text
      bodyLarge: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.5,
        color: colorScheme.onSurface,
      ),
      bodyMedium: TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.25,
        color: colorScheme.onSurface,
      ),
      bodySmall: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.4,
        color: colorScheme.onSurfaceVariant,
      ),

      // Label styles - Buttons, badges, labels
      labelLarge: TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.1,
        color: colorScheme.onSurface,
      ),
      labelMedium: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.5,
        color: colorScheme.onSurface,
      ),
      labelSmall: TextStyle(
        fontSize: 11,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.5,
        color: colorScheme.onSurface,
      ),
    ),

    // ========================================================================
    // ICON THEMES
    // ========================================================================
    iconTheme: IconThemeData(
      color: colorScheme.primary,
      size: 24,
    ),
    appBarTheme: AppBarTheme(
      backgroundColor: colorScheme.primary,
      foregroundColor: colorScheme.onPrimary,
      elevation: 4,
      shadowColor: colorScheme.shadow,
      surfaceTintColor: colorScheme.primary,
      iconTheme: IconThemeData(color: colorScheme.onPrimary),
      titleTextStyle: TextStyle(
        color: colorScheme.onPrimary,
        fontSize: 20,
        fontWeight: FontWeight.w500,
      ),
    ),

    // ========================================================================
    // INPUT DECORATION - Material 3 Filled Style
    // ========================================================================
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
      isDense: false,
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),

      // Enabled state
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: colorScheme.outline, width: 1),
      ),

      // Focused state
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: colorScheme.primary, width: 2),
      ),

      // Error state
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: colorScheme.error, width: 1),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(color: colorScheme.error, width: 2),
      ),

      // Label and hint styles
      labelStyle: TextStyle(
        color: colorScheme.primary,
        fontSize: 14,
        fontWeight: FontWeight.w500,
      ),
      hintStyle: TextStyle(
        color: colorScheme.onSurfaceVariant,
        fontSize: 14,
      ),

      // Error text style
      errorStyle: TextStyle(
        color: colorScheme.error,
        fontSize: 12,
      ),
    ),

    // ========================================================================
    // BUTTON THEMES
    // ========================================================================
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: colorScheme.primary,
        foregroundColor: colorScheme.onPrimary,
        elevation: 4,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        textStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
      ),
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        backgroundColor: colorScheme.surface,
        foregroundColor: colorScheme.primary,
        side: BorderSide(color: colorScheme.outline, width: 1),
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        textStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
      ),
    ),
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        backgroundColor: Colors.transparent,
        foregroundColor: colorScheme.primary,
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        textStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
      ),
    ),

    // ========================================================================
    // FLOATING ACTION BUTTON THEME
    // ========================================================================
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      backgroundColor: colorScheme.primary,
      foregroundColor: colorScheme.onPrimary,
      elevation: 6,
      focusElevation: 8,
      hoverElevation: 8,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),

    // ========================================================================
    // CARD THEME
    // ========================================================================
    cardTheme: CardThemeData(
      color: colorScheme.surface,
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      margin: const EdgeInsets.all(8),
      shadowColor: colorScheme.shadow,
    ),

    // ========================================================================
    // BOTTOM APP BAR THEME
    // ========================================================================
    bottomAppBarTheme: BottomAppBarThemeData(
      color: colorScheme.surface,
      elevation: 4,
      shadowColor: colorScheme.shadow,
      surfaceTintColor: colorScheme.surface,
      shape: const CircularNotchedRectangle(),
    ),

    // ========================================================================
    // TEXT SELECTION THEME
    // ========================================================================
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: colorScheme.primary,
      selectionColor: colorScheme.primary.withValues(alpha: 0.3),
      selectionHandleColor: colorScheme.primary,
    ),

    // ========================================================================
    // ADDITIONAL THEMES
    // ========================================================================
    canvasColor: colorScheme.surface,
  );
}