3f31a509e0
Add three major UI components with animations and dark mode support: - PremiumRouteCard: Enhanced route cards with left accent bar, delivery count badge, animated hover effects (1.02x scale), and dynamic shadow elevation - DarkModeMapComponent: Google Maps integration with dark theme styling, custom info panels, navigation buttons, and delivery status indicators - DeliveryListItem: Animated list items with staggered entrance animations, status badges with icons, contact indicators, and hover states Updates: - RoutesPage: Now uses PremiumRouteCard with improved visual hierarchy - DeliveriesPage: Integrated DarkModeMapComponent and DeliveryListItem with proper theme awareness - Animation system: Leverages existing AppAnimations constants for 200ms fast interactions and easeOut curves Design philosophy: - Element separation through left accent bars (status-coded) - Elevation and shadow for depth (0.1-0.3 opacity) - Staggered animations for list items (50ms delays) - Dark mode optimized for evening use (reduced brightness) - Responsive hover states with tactile feedback Co-Authored-By: Claude <noreply@anthropic.com>
160 lines
4.9 KiB
Dart
160 lines
4.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// Svrnty Brand Color System
|
|
/// Complete color palette following Material Design 3 specifications
|
|
class SvrntyColors {
|
|
// Prevent instantiation
|
|
SvrntyColors._();
|
|
|
|
// ============================================
|
|
// CORE BRAND COLORS
|
|
// ============================================
|
|
|
|
/// Crimson Red - Primary accent and brand signature
|
|
static const Color crimsonRed = Color(0xDF2D45);
|
|
|
|
/// Almost Black - Primary dark background
|
|
static const Color almostBlack = Color(0x06080C);
|
|
|
|
/// Dark Slate - Secondary dark tone
|
|
static const Color darkSlate = Color(0x3A4958);
|
|
|
|
/// Slate Gray - Mid-tone gray
|
|
static const Color slateGray = Color(0x506576);
|
|
|
|
/// Teal - Tertiary accent
|
|
static const Color teal = Color(0x1D2C39);
|
|
|
|
/// Light Gray - Neutral light
|
|
static const Color lightGray = Color(0xAEB8BE);
|
|
|
|
// ============================================
|
|
// SEMANTIC COLORS
|
|
// ============================================
|
|
|
|
/// Success - Green for positive actions and completed states
|
|
static const Color success = Color(0x22C55E);
|
|
|
|
/// Warning - Amber for warnings and attention-needed states
|
|
static const Color warning = Color(0xF59E0B);
|
|
|
|
/// Info - Blue for informational and in-progress states
|
|
static const Color info = Color(0x3B82F6);
|
|
|
|
/// Error - Red for errors, failures, and destructive actions
|
|
static const Color error = Color(0xEF4444);
|
|
|
|
// ============================================
|
|
// DELIVERY STATUS COLORS
|
|
// ============================================
|
|
|
|
/// Status Pending - Awaiting action (Slate Gray)
|
|
static const Color statusPending = slateGray;
|
|
|
|
/// Status In Progress - Currently being delivered (Blue)
|
|
static const Color statusInProgress = info;
|
|
|
|
/// Status Completed - Successfully delivered (Green)
|
|
static const Color statusCompleted = success;
|
|
|
|
/// Status Skipped - Skipped/passed delivery (Amber)
|
|
static const Color statusSkipped = warning;
|
|
|
|
/// Status Failed - Failed delivery (Red)
|
|
static const Color statusFailed = error;
|
|
|
|
// ============================================
|
|
// SURFACE VARIANTS
|
|
// ============================================
|
|
|
|
/// Surface Elevated - Light elevated surface
|
|
static const Color surfaceElevated = Color(0xF5F7FA);
|
|
|
|
/// Surface Subdued - Subdued light surface
|
|
static const Color surfaceSubdued = Color(0xE8EAEE);
|
|
|
|
// ============================================
|
|
// EXTENDED COLOR FAMILIES - SUCCESS (GREEN)
|
|
// ============================================
|
|
|
|
/// Success color light theme
|
|
static const Color successLight = Color(0x22C55E);
|
|
|
|
/// Success on color light theme
|
|
static const Color onSuccessLight = Color(0xFFFFFF);
|
|
|
|
/// Success container light theme
|
|
static const Color successContainerLight = Color(0xDCFCE7);
|
|
|
|
/// Success on container light theme
|
|
static const Color onSuccessContainerLight = Color(0x14532D);
|
|
|
|
/// Success color dark theme
|
|
static const Color successDark = Color(0x4ADE80);
|
|
|
|
/// Success on color dark theme
|
|
static const Color onSuccessDark = Color(0x14532D);
|
|
|
|
/// Success container dark theme
|
|
static const Color successContainerDark = Color(0x15803D);
|
|
|
|
/// Success on container dark theme
|
|
static const Color onSuccessContainerDark = Color(0xDCFCE7);
|
|
|
|
// ============================================
|
|
// EXTENDED COLOR FAMILIES - WARNING (AMBER)
|
|
// ============================================
|
|
|
|
/// Warning color light theme
|
|
static const Color warningLight = Color(0xF59E0B);
|
|
|
|
/// Warning on color light theme
|
|
static const Color onWarningLight = Color(0xFFFFFF);
|
|
|
|
/// Warning container light theme
|
|
static const Color warningContainerLight = Color(0xFEF3C7);
|
|
|
|
/// Warning on container light theme
|
|
static const Color onWarningContainerLight = Color(0x78350F);
|
|
|
|
/// Warning color dark theme
|
|
static const Color warningDark = Color(0xFBBF24);
|
|
|
|
/// Warning on color dark theme
|
|
static const Color onWarningDark = Color(0x78350F);
|
|
|
|
/// Warning container dark theme
|
|
static const Color warningContainerDark = Color(0xD97706);
|
|
|
|
/// Warning on container dark theme
|
|
static const Color onWarningContainerDark = Color(0xFEF3C7);
|
|
|
|
// ============================================
|
|
// EXTENDED COLOR FAMILIES - INFO (BLUE)
|
|
// ============================================
|
|
|
|
/// Info color light theme
|
|
static const Color infoLight = Color(0x3B82F6);
|
|
|
|
/// Info on color light theme
|
|
static const Color onInfoLight = Color(0xFFFFFF);
|
|
|
|
/// Info container light theme
|
|
static const Color infoContainerLight = Color(0xDEEEFF);
|
|
|
|
/// Info on container light theme
|
|
static const Color onInfoContainerLight = Color(0x003DA1);
|
|
|
|
/// Info color dark theme
|
|
static const Color infoDark = Color(0x90CAF9);
|
|
|
|
/// Info on color dark theme
|
|
static const Color onInfoDark = Color(0x003DA1);
|
|
|
|
/// Info container dark theme
|
|
static const Color infoContainerDark = Color(0x0D47A1);
|
|
|
|
/// Info on container dark theme
|
|
static const Color onInfoContainerDark = Color(0xDEEEFF);
|
|
}
|