TIFNGK_E41221954/lib/component/app_theme.dart

165 lines
4.4 KiB
Dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
// ========== COLOR PALETTE ==========
class AppColors {
// Primary
static const Color primary = Color(0xFF1E88E5);
static const Color primaryDark = Color(0xFF1565C0);
static const Color button = Color(0xFF206E97);
// Text Colors
static const Color textDark = Color(0xFF1F2A37);
static const Color textGrey = Color(0xFF6B7280);
static const Color textLight = Color(0xFF9CA3AF);
// Background
static const Color background = Color(0xFFF9FAFB);
static const Color white = Color(0xFFFFFFFF);
static const Color inputBackground = Color(0xFFF3F4F6);
// System
static const Color success = Color(0xFF10B981);
static const Color warning = Color(0xFFF59E0B);
static const Color error = Color(0xFFEF4444);
static const Color info = Color(0xFF3B82F6);
// Neutral
static const Color black = Color(0xFF000000);
static const Color grey100 = Color(0xFFF3F4F6);
static const Color grey200 = Color(0xFFE5E7EB);
static const Color grey300 = Color(0xFFD1D5DB);
static const Color grey400 = Color(0xFF9CA3AF);
}
// ========== TEXT STYLES ==========
class AppTextStyles {
// App Name
static TextStyle appName = GoogleFonts.inter(
fontSize: 30,
fontWeight: FontWeight.w700,
height: 1.5,
color: AppColors.textDark,
);
// Page Title
static TextStyle pageTitle = GoogleFonts.inter(
fontSize: 24,
fontWeight: FontWeight.w600,
height: 1.4,
color: AppColors.textDark,
);
// Input Label
static TextStyle inputLabel = GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w500,
height: 1.4,
color: AppColors.textDark,
letterSpacing: 0.1,
);
// Input Text
static TextStyle inputText = GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
height: 1.5,
color: AppColors.textDark,
);
// Hint Text
static TextStyle hintText = GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
height: 1.5,
color: AppColors.textLight,
);
// Small Text
static TextStyle smallText = GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.4,
color: AppColors.textGrey,
);
// Small Link Text
static TextStyle smallLinkText = GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w500,
height: 1.4,
color: AppColors.primary,
);
// Button Text
static TextStyle buttonText = GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.5,
color: AppColors.white,
);
// Body Medium
static TextStyle bodyMedium = GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w400,
height: 1.4,
color: AppColors.textDark,
);
// Body Small
static TextStyle bodySmall = GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
color: AppColors.textDark,
);
// Label Small
static TextStyle labelSmall = GoogleFonts.inter(
fontSize: 10,
fontWeight: FontWeight.w500,
height: 1.2,
color: AppColors.textGrey,
);
}
// ========== INPUT DECORATION ==========
class AppInputDecoration {
static InputDecoration inputWithIcon(IconData icon) {
return InputDecoration(
filled: true,
fillColor: AppColors.inputBackground,
contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: AppColors.grey300, width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: AppColors.primary, width: 2),
),
prefixIcon: Icon(icon, color: AppColors.textLight),
hintStyle: AppTextStyles.hintText,
);
}
}
// ========== BUTTON STYLES ==========
class AppButtonStyles {
static ButtonStyle primaryButton = ElevatedButton.styleFrom(
backgroundColor: AppColors.primary,
foregroundColor: AppColors.white,
textStyle: AppTextStyles.buttonText,
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
minimumSize: const Size(double.infinity, 56),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
elevation: 0,
);
}