mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-14 10:47:31 +02:00
feat: Add Apple TV Design System Visual Reference and Component Guide
- Introduced a comprehensive visual reference for the Apple TV design system, including color palette, component specifications, typography, shadow elevation system, and animation timing guide. - Detailed button states, card components, text styles, and navigation focus flow for improved user experience. - Included accessibility considerations and a testing checklist to ensure compliance with design standards. chore: Complete redesign of XtremFlow Apple TV theme - Updated color palette to align with Apple TV aesthetics, enhancing sophistication and premium feel. - Optimized typography for better readability at 10ft viewing distance. - Improved focus states for remote navigation clarity. - Implemented a new 5-level shadow system for cinematic depth. - Refined glass effects for a premium appearance. - Ensured all components are accessible and comfortable for remote use.
This commit is contained in:
GitHub Copilot committed
1 parent
863e5ddad4
commit
611fc41c76
8 files changed
+4598
-274
No files matched your search
+110
-137
@@ -1,56 +1,113 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// XtremFlow Apple TV Modern Palette (tvOS 18+ inspired)
|
||||
///
|
||||
/// Premium, sophisticated color system designed for immersive TV viewing.
|
||||
/// - Dark foundation with subtle greys
|
||||
/// - Vibrant accent colors for focus states
|
||||
/// - Rich glassmorphism effects
|
||||
/// - Category-specific semantic colors
|
||||
/// XtremFlow Apple TV Premium Color System
|
||||
///
|
||||
/// Designed for modern tvOS aesthetic:
|
||||
/// - OLED-optimized blacks
|
||||
/// - Sophisticated, understated accent colors
|
||||
/// - Premium glass effects
|
||||
/// - Apple-compliant semantic colors
|
||||
class AppColors {
|
||||
AppColors._();
|
||||
|
||||
// ============ BACKGROUNDS ============
|
||||
/// Pure black background - OLED optimized
|
||||
// ============ BACKGROUNDS (OLED Optimized) ============
|
||||
/// Pure black, optimal for OLED screens
|
||||
static const Color background = Color(0xFF000000);
|
||||
|
||||
/// Primary dark surface for cards/containers
|
||||
static const Color surface = Color(0xFF1C1C1E);
|
||||
/// Deep black with minimal elevation
|
||||
static const Color backgroundAlt = Color(0xFF0A0A0A);
|
||||
|
||||
/// Secondary surface - slightly lighter for hierarchy
|
||||
static const Color surfaceVariant = Color(0xFF2A2A2E);
|
||||
// ============ SURFACE LAYERS (Material Design 3) ============
|
||||
/// Level 1 - Primary card surfaces, containers
|
||||
static const Color surface = Color(0xFF1A1A1A);
|
||||
|
||||
/// Tertiary surface - subtle depth
|
||||
static const Color surfaceTertiary = Color(0xFF383838);
|
||||
/// Level 2 - Elevated surfaces, hovered cards
|
||||
static const Color surfaceVariant = Color(0xFF2A2A2A);
|
||||
|
||||
/// Glass effect overlay
|
||||
static const Color surfaceGlass = Color(0x0DFFFFFF);
|
||||
/// Level 3 - Disabled states, secondary containers
|
||||
static const Color surfaceTertiary = Color(0xFF3A3A3A);
|
||||
|
||||
/// Glass border subtle line
|
||||
static const Color border = Color(0xFF3A3A3C);
|
||||
static const Color borderLight = Color(0xFF5A5A5C);
|
||||
static const Color focusBorder = Color(0xFFFFFFFF);
|
||||
/// Level 4 - Dividers and minimal visible elements
|
||||
static const Color surfaceQuad = Color(0xFF4A4A4A);
|
||||
|
||||
// ============ PRIMARY ACCENTS ============
|
||||
/// Main brand color - vibrant and attention-grabbing
|
||||
static const Color primary = Color(0xFF00D4FF); // Cyan/Sky Blue
|
||||
/// Level 5 - Premium elevated containers
|
||||
static const Color surfaceFive = Color(0xFF5A5A5A);
|
||||
|
||||
/// Secondary accent for variety
|
||||
static const Color secondary = Color(0xFFFF6B6B); // Soft Red
|
||||
// ============ PRIMARY ACCENT (Sophisticated Teal) ============
|
||||
/// Main interactive color for focus states and CTAs
|
||||
/// Refined from #00D4FF to sophisticated #00A0D2 (80% saturation)
|
||||
static const Color primary = Color(0xFF00A0D2);
|
||||
|
||||
/// Tertiary accent for highlights
|
||||
static const Color tertiary = Color(0xFF00E5BB); // Mint
|
||||
/// Darker teal for hover/pressed states
|
||||
static const Color primaryDark = Color(0xFF0092BC);
|
||||
|
||||
/// Main accent for focused elements
|
||||
static const Color accent = Color(0xFF00D4FF);
|
||||
/// Lighter teal for disabled variants
|
||||
static const Color primaryLight = Color(0xFF1BC4E5);
|
||||
|
||||
/// Focus/interactive state - white
|
||||
// ============ SECONDARY ACCENT (Apple Red) ============
|
||||
/// Error, warning, live indicator colors
|
||||
/// Uses Apple's official red (#FF3B30)
|
||||
static const Color secondary = Color(0xFFFF3B30);
|
||||
|
||||
/// Darker red for hover states
|
||||
static const Color secondaryDark = Color(0xFFE62817);
|
||||
|
||||
/// Lighter red for disabled states
|
||||
static const Color secondaryLight = Color(0xFFFF6B6B);
|
||||
|
||||
// ============ TERTIARY ACCENT (Apple Green) ============
|
||||
/// Success and positive state indicator
|
||||
static const Color tertiary = Color(0xFF34C759);
|
||||
|
||||
// ============ PRIMARY TEXT (Hierarchy) ============
|
||||
/// Primary text - pure white for maximum readability
|
||||
static const Color textPrimary = Color(0xFFFFFFFF);
|
||||
|
||||
/// Secondary text - 60% opacity white
|
||||
static const Color textSecondary = Color(0xFF999999);
|
||||
|
||||
/// Tertiary text - 40% opacity white
|
||||
static const Color textTertiary = Color(0xFF666666);
|
||||
|
||||
/// Quaternary text - 25% opacity white
|
||||
static const Color textQuaternary = Color(0xFF404040);
|
||||
|
||||
// ============ STATE COLORS (Semantic) ============
|
||||
static const Color success = Color(0xFF34C759);
|
||||
static const Color warning = Color(0xFFFF9500);
|
||||
static const Color error = Color(0xFFFF3B30);
|
||||
static const Color info = Color(0xFF32ADE6);
|
||||
static const Color disabled = Color(0xFF888888);
|
||||
|
||||
// ============ FOCUS STATES (Remote Control) ============
|
||||
/// Focus border color - white for maximum contrast
|
||||
static const Color focusColor = Color(0xFFFFFFFF);
|
||||
|
||||
// ============ GRADIENTS ============
|
||||
/// Primary action gradient
|
||||
/// Focus border (use with 2px stroke width)
|
||||
static const Color focusBorder = Color(0xFFFFFFFF);
|
||||
|
||||
// ============ GLASS EFFECTS (Premium Refinement) ============
|
||||
/// Glass background - 6% white opacity (refined from 8%)
|
||||
/// Creates premium glassmorphic effect without being too visible
|
||||
static final Color glassBackground =
|
||||
const Color(0xFFFFFFFF).withOpacity(0.06);
|
||||
|
||||
/// Glass border - 12% white opacity
|
||||
static final Color glassBorder =
|
||||
const Color(0xFFFFFFFF).withOpacity(0.12);
|
||||
|
||||
/// Premium glass variant - 10% white opacity
|
||||
static final Color glassPremium =
|
||||
const Color(0xFFFFFFFF).withOpacity(0.10);
|
||||
|
||||
/// Dark glass for overlays and scrim effects
|
||||
static final Color glassBackgroundDark =
|
||||
const Color(0xFF000000).withOpacity(0.50);
|
||||
|
||||
// ============ GRADIENTS (Premium) ============
|
||||
/// Primary gradient for CTAs and highlights
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
colors: [Color(0xFF00D4FF), Color(0xFF00E5BB)],
|
||||
colors: [Color(0xFF00A0D2), Color(0xFF00D4AA)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
@@ -62,107 +119,32 @@ class AppColors {
|
||||
end: Alignment.bottomCenter,
|
||||
);
|
||||
|
||||
/// Success-to-info gradient
|
||||
static const LinearGradient successGradient = LinearGradient(
|
||||
colors: [Color(0xFF00E5BB), Color(0xFF00D4FF)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
// ============ RATING & BADGE COLORS ============
|
||||
/// Premium gold for ratings and premium badges
|
||||
static const Color ratingGold = Color(0xFFFFD700);
|
||||
|
||||
/// Premium gradient for hero elements
|
||||
static const LinearGradient premiumGradient = LinearGradient(
|
||||
colors: [Color(0xFFFF6B6B), Color(0xFFFFB347)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
/// Premium indicator color
|
||||
static const Color ratingPremium = Color(0xFFFFD700);
|
||||
|
||||
// ============ SEMANTIC COLORS ============
|
||||
/// Success state - green
|
||||
static const Color success = Color(0xFF34C759);
|
||||
|
||||
/// Warning state - orange/amber
|
||||
static const Color warning = Color(0xFFFF9500);
|
||||
|
||||
/// Error state - red
|
||||
static const Color error = Color(0xFFFF3B30);
|
||||
|
||||
/// Info state - blue
|
||||
static const Color info = Color(0xFF30B0C0);
|
||||
|
||||
/// Neutral/disabled state
|
||||
static const Color disabled = Color(0xFF8E8E93);
|
||||
|
||||
// ============ TEXT HIERARCHY ============
|
||||
/// Primary text - white
|
||||
static const Color textPrimary = Color(0xFFFFFFFF);
|
||||
|
||||
/// Secondary text - light grey (60%)
|
||||
static const Color textSecondary = Color(0xFF999999);
|
||||
|
||||
/// Tertiary text - medium grey (40%)
|
||||
static const Color textTertiary = Color(0xFF666666);
|
||||
|
||||
/// Quaternary text - dark grey (25%)
|
||||
static const Color textQuaternary = Color(0xFF404040);
|
||||
|
||||
// ============ CATEGORY COLORS ============
|
||||
/// Live content - bright red
|
||||
static const Color live = Color(0xFFFF3B30);
|
||||
|
||||
/// Movies content - electric blue
|
||||
static const Color movies = Color(0xFF00B4E8);
|
||||
|
||||
/// Series content - mint green
|
||||
static const Color series = Color(0xFF00E5BB);
|
||||
|
||||
/// Sports content - purple
|
||||
static const Color sports = Color(0xFFBF5AF0);
|
||||
|
||||
/// News content - yellow
|
||||
static const Color news = Color(0xFFFFC300);
|
||||
|
||||
/// Music content - pink
|
||||
static const Color music = Color(0xFFFF2D55);
|
||||
|
||||
// ============ RATINGS ============
|
||||
/// IMDb-style gold for ratings
|
||||
static const Color ratingGold = Color(0xFFFDB913);
|
||||
|
||||
/// Premium/VIP gold
|
||||
static const Color premiumGold = Color(0xFFFFD700);
|
||||
|
||||
/// Trending gradient
|
||||
static const LinearGradient trendingGradient = LinearGradient(
|
||||
colors: [Color(0xFFFF6B6B), Color(0xFFFF8E53)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
// ============ GLASS EFFECTS ============
|
||||
/// Glass background - frozen white at 20% opacity
|
||||
static final Color glassBackground = const Color(0xFFFFFFFF).withOpacity(0.08);
|
||||
|
||||
/// Glass border - white line at 15% opacity
|
||||
static final Color glassBorder = const Color(0xFFFFFFFF).withOpacity(0.15);
|
||||
|
||||
/// Dark glass - for overlays
|
||||
static final Color glassBackgroundDark = const Color(0xFF000000).withOpacity(0.5);
|
||||
|
||||
/// Premium glass - stronger visibility
|
||||
static final Color glassPremium = const Color(0xFFFFFFFF).withOpacity(0.12);
|
||||
|
||||
// ============ OVERLAY COLORS ============
|
||||
/// Overlay for modals/dialogs
|
||||
// ============ OVERLAY & SCRIM ============
|
||||
/// Semi-opaque overlay for modals (50%)
|
||||
static const Color overlay = Color(0x80000000);
|
||||
|
||||
/// Scrim color
|
||||
/// Dark scrim for modal backgrounds
|
||||
static final Color scrim = Colors.black.withOpacity(0.4);
|
||||
|
||||
/// Loading shimmer color
|
||||
static const Color shimmer = Color(0xFF2A2A2E);
|
||||
// ============ DIVIDERS & BORDERS ============
|
||||
/// Default border color (subtle white line)
|
||||
static final Color border = const Color(0xFFFFFFFF).withOpacity(0.1);
|
||||
|
||||
// ============ THEME SCHEMES ============
|
||||
/// Dark mode color scheme (main)
|
||||
/// Strong border for emphasis
|
||||
static final Color borderStrong = const Color(0xFFFFFFFF).withOpacity(0.2);
|
||||
|
||||
// ============ LIVE INDICATOR ============
|
||||
static const Color live = Color(0xFFFF3B30);
|
||||
|
||||
// ============ COLOR SCHEME (Material 3 Compatible) ============
|
||||
/// Complete Material 3 color scheme for ThemeData
|
||||
static ColorScheme get darkColorScheme => const ColorScheme.dark(
|
||||
primary: primary,
|
||||
onPrimary: Color(0xFF000000),
|
||||
@@ -177,13 +159,4 @@ class AppColors {
|
||||
brightness: Brightness.dark,
|
||||
scrim: overlay,
|
||||
);
|
||||
|
||||
/// Light mode color scheme (fallback)
|
||||
static ColorScheme get lightColorScheme => const ColorScheme.light(
|
||||
primary: Color(0xFF0084FF),
|
||||
secondary: Color(0xFFFF3B30),
|
||||
surface: Color(0xFFFAFAFA),
|
||||
error: error,
|
||||
brightness: Brightness.light,
|
||||
);
|
||||
}
|
||||
+243
-136
@@ -2,17 +2,18 @@ import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'app_colors.dart';
|
||||
|
||||
/// XtremFlow Apple TV Modern Theme
|
||||
/// XtremFlow Apple TV Premium Theme System
|
||||
///
|
||||
/// Premium, immersive design system based on tvOS 18+
|
||||
/// - Focus-driven interactions
|
||||
/// - Sophisticated glassmorphism
|
||||
/// - Rich typography hierarchy
|
||||
/// - Cinematic animations
|
||||
/// Sophisticated design language based on tvOS 18+:
|
||||
/// - OLED-optimized dark foundation
|
||||
/// - Refined, understated accent colors
|
||||
/// - Premium glassmorphic effects
|
||||
/// - Focus-driven remote interaction
|
||||
/// - Cinematic animations & transitions
|
||||
class AppTheme {
|
||||
AppTheme._();
|
||||
|
||||
// ============ SPACING (8pt system) ============
|
||||
// ============ SPACING (8pt base grid system) ============
|
||||
static const double spacing2 = 2.0;
|
||||
static const double spacing4 = 4.0;
|
||||
static const double spacing8 = 8.0;
|
||||
@@ -22,9 +23,9 @@ class AppTheme {
|
||||
static const double spacing24 = 24.0;
|
||||
static const double spacing32 = 32.0;
|
||||
static const double spacing40 = 40.0;
|
||||
static const double spacing48 = 48.0;
|
||||
static const double spacing48 = 48.0; // TV minimum safe area
|
||||
static const double spacing56 = 56.0;
|
||||
static const double spacing64 = 64.0;
|
||||
static const double spacing64 = 64.0; // Hero section padding
|
||||
|
||||
// ============ RADIUS (modern, organic curves) ============
|
||||
static const double radiusXs = 4.0;
|
||||
@@ -35,14 +36,54 @@ class AppTheme {
|
||||
static const double radiusXxl = 32.0;
|
||||
static const double radiusFull = 999.0;
|
||||
|
||||
// ============ ELEVATION (Shadow system) ============
|
||||
static const double elevationXs = 2.0;
|
||||
static const double elevationSm = 4.0;
|
||||
static const double elevationMd = 8.0;
|
||||
static const double elevationLg = 16.0;
|
||||
static const double elevationXl = 24.0;
|
||||
// ============ ELEVATION (5-level cinematic shadow system) ============
|
||||
// Level 1: Depth 1px - minimal elevation (UI borders)
|
||||
static const List<BoxShadow> elevationXs = [
|
||||
BoxShadow(
|
||||
color: Color(0x0D000000),
|
||||
blurRadius: 2,
|
||||
offset: Offset(0, 1),
|
||||
),
|
||||
];
|
||||
|
||||
// ============ ANIMATION (cinematic timing) ============
|
||||
// Level 2: Depth 4px - cards, buttons
|
||||
static const List<BoxShadow> elevationSm = [
|
||||
BoxShadow(
|
||||
color: Color(0x14000000),
|
||||
blurRadius: 4,
|
||||
offset: Offset(0, 2),
|
||||
),
|
||||
];
|
||||
|
||||
// Level 3: Depth 8px - hovered cards, modals
|
||||
static const List<BoxShadow> elevationMd = [
|
||||
BoxShadow(
|
||||
color: Color(0x23000000),
|
||||
blurRadius: 8,
|
||||
offset: Offset(0, 4),
|
||||
),
|
||||
];
|
||||
|
||||
// Level 4: Depth 16px - elevated panels, bottom sheets
|
||||
static const List<BoxShadow> elevationLg = [
|
||||
BoxShadow(
|
||||
color: Color(0x38000000),
|
||||
blurRadius: 16,
|
||||
offset: Offset(0, 8),
|
||||
),
|
||||
];
|
||||
|
||||
// Level 5: Depth 24px - floating menus, dropdowns
|
||||
static const List<BoxShadow> elevationXl = [
|
||||
BoxShadow(
|
||||
color: Color(0x4D000000),
|
||||
blurRadius: 24,
|
||||
offset: Offset(0, 12),
|
||||
),
|
||||
];
|
||||
|
||||
// ============ ANIMATION (cinematic timing for TV) ============
|
||||
// Durations designed for 10ft viewing distance
|
||||
static const Duration durationXs = Duration(milliseconds: 100);
|
||||
static const Duration durationSm = Duration(milliseconds: 150);
|
||||
static const Duration durationBase = Duration(milliseconds: 200);
|
||||
@@ -50,13 +91,17 @@ class AppTheme {
|
||||
static const Duration durationLg = Duration(milliseconds: 400);
|
||||
static const Duration durationXl = Duration(milliseconds: 600);
|
||||
|
||||
// Curves
|
||||
/// Curves optimized for premium feel
|
||||
// Smooth deceleration for content
|
||||
static const Curve curveDefault = Curves.easeInOutCubic;
|
||||
// Quick snap for focus
|
||||
static const Curve curveSnappy = Curves.fastOutSlowIn;
|
||||
// Smooth exit for elegance
|
||||
static const Curve curveSmooth = Curves.easeOutCubic;
|
||||
// Attention-grabbing bounce
|
||||
static const Curve curveBouncy = Curves.elasticOut;
|
||||
|
||||
// ============ DARK THEME (TV Main) ============
|
||||
// ============ DARK THEME (TV Main - Apple TV Modern) ============
|
||||
static ThemeData get darkTheme {
|
||||
final baseTheme = ThemeData.dark(useMaterial3: true);
|
||||
|
||||
@@ -66,73 +111,88 @@ class AppTheme {
|
||||
scaffoldBackgroundColor: AppColors.background,
|
||||
canvasColor: AppColors.background,
|
||||
|
||||
// ============ TYPOGRAPHY ============
|
||||
// Premium font stack: SF Pro Display → Outfit → Inter
|
||||
// ============ TYPOGRAPHY (Apple TV Optimized for 10ft Viewing) ============
|
||||
textTheme: TextTheme(
|
||||
// Display - Hero/Large titles (cinema billboards)
|
||||
/// Display Large - 64px (HERO TITLES)
|
||||
/// Usage: Main featured content, landing pages
|
||||
/// Increased from 56px for true presence on TV screens
|
||||
displayLarge: GoogleFonts.outfit(
|
||||
fontSize: 56,
|
||||
fontSize: 64,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -1.5,
|
||||
height: 1.1,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Medium - Section titles (featured content)
|
||||
displayMedium: GoogleFonts.outfit(
|
||||
fontSize: 48,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -1.0,
|
||||
height: 1.15,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Display Small - Sub-titles
|
||||
displaySmall: GoogleFonts.outfit(
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.5,
|
||||
letterSpacing: -2.0,
|
||||
height: 1.2,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Medium - Card titles, prominent labels
|
||||
headlineMedium: GoogleFonts.outfit(
|
||||
fontSize: 28,
|
||||
/// Display Medium - 56px (PAGE TITLES)
|
||||
/// Usage: Section headers, featured content titles
|
||||
displayMedium: GoogleFonts.outfit(
|
||||
fontSize: 56,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.3,
|
||||
letterSpacing: -1.5,
|
||||
height: 1.15,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
/// Display Small - 44px (SUBSECTION TITLES)
|
||||
displaySmall: GoogleFonts.outfit(
|
||||
fontSize: 44,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -1.0,
|
||||
height: 1.2,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
/// Headline Large - 32px (strong emphasis)
|
||||
headlineLarge: GoogleFonts.outfit(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.5,
|
||||
height: 1.25,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Headline Small - Smaller headings
|
||||
headlineSmall: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
/// Headline Medium - 28px (CARD TITLES)
|
||||
/// Usage: Featured content cards, important sections
|
||||
headlineMedium: GoogleFonts.outfit(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
letterSpacing: -0.3,
|
||||
height: 1.3,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Large - Labels, emphasis text
|
||||
titleLarge: GoogleFonts.outfit(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.1,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Medium - UI elements
|
||||
titleMedium: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
/// Headline Small - 22px (strong labels)
|
||||
headlineSmall: GoogleFonts.outfit(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Title Small - Secondary labels
|
||||
/// Title Large - 18px (prominent UI text)
|
||||
/// Usage: Navigation, strong emphasis
|
||||
titleLarge: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
/// Title Medium - 16px (BUTTON LABELS)
|
||||
/// Usage: Button text, input labels
|
||||
titleMedium: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0,
|
||||
height: 1.5,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
/// Title Small - 14px (SECONDARY LABELS)
|
||||
/// Usage: Secondary emphasis, hints
|
||||
titleSmall: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
@@ -141,62 +201,67 @@ class AppTheme {
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Large - Primary body text
|
||||
/// Body Large - 16px (PRIMARY CONTENT)
|
||||
/// Usage: Main descriptions, content text
|
||||
/// Line height INCREASED to 1.6 for TV comfort
|
||||
bodyLarge: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
height: 1.6,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Medium - Standard body text
|
||||
/// Body Medium - 14px (SECONDARY CONTENT)
|
||||
/// Line height INCREASED to 1.6
|
||||
bodyMedium: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.5,
|
||||
height: 1.6,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// Body Small - Secondary text
|
||||
/// Body Small - 12px (TERTIARY TEXT)
|
||||
/// Usage: Metadata, timestamps, specs
|
||||
bodySmall: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
letterSpacing: 0.3,
|
||||
letterSpacing: 0.15,
|
||||
height: 1.5,
|
||||
color: AppColors.textTertiary,
|
||||
),
|
||||
|
||||
// Label Large - Button text, prominent labels
|
||||
/// Label Large - 12px (BADGE TEXT)
|
||||
/// Usage: Badge text, tab labels
|
||||
labelLarge: GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.2,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Medium - Secondary buttons
|
||||
labelMedium: GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
// Label Small - Badge/tags
|
||||
/// Label Medium - 11px (SMALL BUTTONS)
|
||||
labelMedium: GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.3,
|
||||
height: 1.4,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
|
||||
/// Label Small - 10px (TINY BADGES)
|
||||
labelSmall: GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.5,
|
||||
height: 1.4,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
|
||||
// ============ APP BAR ============
|
||||
// ============ APP BAR (Header Navigation) ============
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
@@ -204,19 +269,21 @@ class AppTheme {
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
titleTextStyle: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.3,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
|
||||
// ============ INPUTS (Search, filters, etc) ============
|
||||
// ============ INPUT DECORATION (Search, filters, text fields) ============
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: AppColors.surface,
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing14),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing16,
|
||||
vertical: spacing12,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderSide: const BorderSide(color: AppColors.border),
|
||||
@@ -227,8 +294,7 @@ class AppTheme {
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderSide:
|
||||
const BorderSide(color: AppColors.primary, width: 2.0),
|
||||
borderSide: const BorderSide(color: AppColors.primary, width: 2.5),
|
||||
),
|
||||
hintStyle: GoogleFonts.inter(
|
||||
color: AppColors.textTertiary,
|
||||
@@ -239,16 +305,18 @@ class AppTheme {
|
||||
suffixIconColor: AppColors.textSecondary,
|
||||
),
|
||||
|
||||
// ============ BUTTONS ============
|
||||
// ============ BUTTONS (Primary CTA) ============
|
||||
filledButtonTheme: FilledButtonThemeData(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: AppColors.primary,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
disabledBackgroundColor: AppColors.disabled,
|
||||
foregroundColor: Colors.black,
|
||||
disabledBackgroundColor: AppColors.disabled.withOpacity(0.4),
|
||||
disabledForegroundColor: AppColors.textTertiary,
|
||||
elevation: 0,
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing24, vertical: spacing12),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing24,
|
||||
vertical: spacing12,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
@@ -260,26 +328,28 @@ class AppTheme {
|
||||
).copyWith(
|
||||
overlayColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return AppColors.accent.withOpacity(0.2);
|
||||
return Colors.black.withOpacity(0.1);
|
||||
}
|
||||
if (states.contains(WidgetState.pressed)) {
|
||||
return AppColors.accent.withOpacity(0.4);
|
||||
return Colors.black.withOpacity(0.2);
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
),
|
||||
),
|
||||
|
||||
// Outline buttons
|
||||
// ============ OUTLINED BUTTONS ============
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: AppColors.primary,
|
||||
side: const BorderSide(color: AppColors.primary, width: 1.5),
|
||||
side: const BorderSide(color: AppColors.primary, width: 2),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing20, vertical: spacing12),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing20,
|
||||
vertical: spacing12,
|
||||
),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
@@ -287,12 +357,14 @@ class AppTheme {
|
||||
),
|
||||
),
|
||||
|
||||
// Text buttons
|
||||
// ============ TEXT BUTTONS (Secondary Actions) ============
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: AppColors.primary,
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: spacing16, vertical: spacing8),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing16,
|
||||
vertical: spacing8,
|
||||
),
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
@@ -300,40 +372,51 @@ class AppTheme {
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CARDS ============
|
||||
// ============ CARDS (Content containers) ============
|
||||
cardTheme: CardThemeData(
|
||||
color: AppColors.surface,
|
||||
elevation: 0,
|
||||
margin: EdgeInsets.zero,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusLg),
|
||||
side: const BorderSide(color: AppColors.border, width: 1),
|
||||
side: BorderSide(
|
||||
color: AppColors.border,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ============ DIALOGS & BOTTOM SHEETS ============
|
||||
// ============ DIALOGS (Modal content) ============
|
||||
dialogTheme: DialogThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: elevationXl,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusXl),
|
||||
side: BorderSide(
|
||||
color: AppColors.border,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
titleTextStyle: GoogleFonts.outfit(
|
||||
fontSize: 24,
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.textPrimary,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
contentTextStyle: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.textSecondary,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
|
||||
bottomSheetTheme: const BottomSheetThemeData(
|
||||
// ============ BOTTOM SHEET ============
|
||||
bottomSheetTheme: BottomSheetThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: elevationLg,
|
||||
shape: RoundedRectangleBorder(
|
||||
elevation: 0,
|
||||
surfaceTintColor: AppColors.primary.withOpacity(0.05),
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(radiusXl),
|
||||
topRight: Radius.circular(radiusXl),
|
||||
@@ -341,7 +424,7 @@ class AppTheme {
|
||||
),
|
||||
),
|
||||
|
||||
// ============ CHIPS ============
|
||||
// ============ CHIPS (Tag/filter components) ============
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: AppColors.surfaceVariant,
|
||||
disabledColor: AppColors.surfaceTertiary,
|
||||
@@ -356,9 +439,12 @@ class AppTheme {
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: spacing12, vertical: spacing8),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: spacing12,
|
||||
vertical: spacing8,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
borderRadius: BorderRadius.circular(radiusFull),
|
||||
side: const BorderSide(color: AppColors.border),
|
||||
),
|
||||
),
|
||||
@@ -375,7 +461,7 @@ class AppTheme {
|
||||
borderRadius: BorderRadius.circular(radiusMd),
|
||||
),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
elevation: elevationMd,
|
||||
elevation: 0,
|
||||
),
|
||||
|
||||
// ============ PROGRESS INDICATORS ============
|
||||
@@ -383,6 +469,7 @@ class AppTheme {
|
||||
color: AppColors.primary,
|
||||
linearTrackColor: AppColors.surfaceVariant,
|
||||
circularTrackColor: AppColors.surfaceVariant,
|
||||
refreshBackgroundColor: AppColors.surface,
|
||||
),
|
||||
|
||||
// ============ SLIDERS ============
|
||||
@@ -391,47 +478,50 @@ class AppTheme {
|
||||
inactiveTrackColor: AppColors.surfaceVariant,
|
||||
trackHeight: 4.0,
|
||||
thumbColor: AppColors.primary,
|
||||
overlayColor: Color(0x2900D4FF),
|
||||
overlayColor: Color(0x2900A0D2),
|
||||
valueIndicatorColor: AppColors.surfaceTertiary,
|
||||
),
|
||||
|
||||
// ============ DIVIDER ============
|
||||
dividerTheme: const DividerThemeData(
|
||||
color: AppColors.border,
|
||||
thickness: 0.5,
|
||||
thickness: 1,
|
||||
space: spacing16,
|
||||
),
|
||||
|
||||
// ============ NAVIGATION ============
|
||||
// ============ NAVIGATION RAIL (Side menu) ============
|
||||
navigationRailTheme: NavigationRailThemeData(
|
||||
backgroundColor: AppColors.surface,
|
||||
elevation: 0,
|
||||
selectedIconTheme: const IconThemeData(color: AppColors.primary),
|
||||
unselectedIconTheme: const IconThemeData(color: AppColors.textSecondary),
|
||||
selectedIconTheme: const IconThemeData(
|
||||
color: AppColors.primary,
|
||||
size: 28,
|
||||
),
|
||||
unselectedIconTheme: const IconThemeData(
|
||||
color: AppColors.textSecondary,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
|
||||
// ============ EXTENSIONS ============
|
||||
// ============ EXTENSIONS (Custom theme properties) ============
|
||||
extensions: <ThemeExtension<dynamic>>[
|
||||
_AppThemeExtension.dark,
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// Light theme (fallback)
|
||||
// ============ LIGHT THEME (Fallback) ============
|
||||
static ThemeData get lightTheme {
|
||||
final baseTheme = ThemeData.light(useMaterial3: true);
|
||||
|
||||
return baseTheme.copyWith(
|
||||
colorScheme: AppColors.lightColorScheme,
|
||||
scaffoldBackgroundColor: Colors.white,
|
||||
colorScheme: AppColors.darkColorScheme,
|
||||
scaffoldBackgroundColor: AppColors.background,
|
||||
textTheme: GoogleFonts.interTextTheme(baseTheme.textTheme),
|
||||
);
|
||||
}
|
||||
|
||||
// ============ SPACING CONSTANTS (for convenience) ============
|
||||
static const double spacing14 = 14.0;
|
||||
|
||||
// ============ SIZE CONSTANTS ============
|
||||
// ============ SIZE CONSTANTS (Icon & Button sizes) ============
|
||||
static const double iconSizeXs = 16.0;
|
||||
static const double iconSizeSm = 20.0;
|
||||
static const double iconSizeMd = 24.0;
|
||||
@@ -440,7 +530,7 @@ class AppTheme {
|
||||
|
||||
static const double buttonHeightSm = 36.0;
|
||||
static const double buttonHeightMd = 44.0;
|
||||
static const double buttonHeightLg = 52.0;
|
||||
static const double buttonHeightLg = 56.0; // TV-comfortable tap target
|
||||
|
||||
// ============ ASPECT RATIOS ============
|
||||
static const double posterAspectRatio = 2 / 3;
|
||||
@@ -448,29 +538,44 @@ class AppTheme {
|
||||
static const double squareAspectRatio = 1.0;
|
||||
}
|
||||
|
||||
/// Extension class for custom theme properties
|
||||
/// Custom theme extension for advanced properties
|
||||
class _AppThemeExtension extends ThemeExtension<_AppThemeExtension> {
|
||||
const _AppThemeExtension({
|
||||
this.glassShadow,
|
||||
this.focusShadow,
|
||||
this.elevatedShadow,
|
||||
});
|
||||
|
||||
/// Premium glass shadow effect
|
||||
final List<BoxShadow>? glassShadow;
|
||||
|
||||
/// Focus state glow for remote control
|
||||
final List<BoxShadow>? focusShadow;
|
||||
|
||||
/// Elevated surface shadow
|
||||
final List<BoxShadow>? elevatedShadow;
|
||||
|
||||
static _AppThemeExtension get dark => _AppThemeExtension(
|
||||
glassShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
spreadRadius: -5,
|
||||
color: Colors.black.withOpacity(0.15),
|
||||
blurRadius: 16,
|
||||
spreadRadius: -4,
|
||||
),
|
||||
],
|
||||
focusShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.primary.withOpacity(0.4),
|
||||
blurRadius: 16,
|
||||
spreadRadius: 2,
|
||||
color: AppColors.primary.withOpacity(0.5),
|
||||
blurRadius: 20,
|
||||
spreadRadius: 4,
|
||||
),
|
||||
],
|
||||
elevatedShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.25),
|
||||
blurRadius: 12,
|
||||
spreadRadius: 0,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
);
|
||||
@@ -479,10 +584,12 @@ class _AppThemeExtension extends ThemeExtension<_AppThemeExtension> {
|
||||
ThemeExtension<_AppThemeExtension> copyWith({
|
||||
List<BoxShadow>? glassShadow,
|
||||
List<BoxShadow>? focusShadow,
|
||||
List<BoxShadow>? elevatedShadow,
|
||||
}) {
|
||||
return _AppThemeExtension(
|
||||
glassShadow: glassShadow ?? this.glassShadow,
|
||||
focusShadow: focusShadow ?? this.focusShadow,
|
||||
elevatedShadow: elevatedShadow ?? this.elevatedShadow,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -305,7 +305,7 @@ class MobileTheme {
|
||||
final baseTheme = ThemeData.light(useMaterial3: true);
|
||||
|
||||
return baseTheme.copyWith(
|
||||
colorScheme: AppColors.lightColorScheme,
|
||||
colorScheme: AppColors.darkColorScheme,
|
||||
textTheme: GoogleFonts.interTextTheme(baseTheme.textTheme),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user