165 lines
4.4 KiB
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,
|
|
);
|
|
} |