Mathias Beaulieu-Duncan
edb106a7fd
- Overhaul theme system with Svrnty design and WCAG AAA compliance - Remove android, macos, and web platform files (iOS-only focus) - Update components with improved dark mode map and UI refinements - Enhance settings page with additional configuration options - Add theme system documentation in lib/theme/README.md - Update CLAUDE.md with comprehensive theme guidelines Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
293 lines
8.1 KiB
Dart
293 lines
8.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'color_system.dart';
|
|
|
|
/// SVRNTY Status Color Utility
|
|
/// Provides consistent color access for delivery status indicators across the app
|
|
class StatusColorScheme {
|
|
// Pending: Amber - Attention needed
|
|
static const Color pending = SvrntyColors.statusPending; // #F59E0B
|
|
static const Color pendingBackground = SvrntyColors.statusPendingBg; // #FEF3C7
|
|
static const Color pendingText = Color(0xFF92400E);
|
|
|
|
// In Transit: Teal Blue - Active process
|
|
static const Color inTransit = SvrntyColors.statusInTransit; // #2D3843
|
|
static const Color inTransitBackground = SvrntyColors.statusInTransitBg; // #E0E7ED
|
|
static const Color inTransitText = Color(0xFF0A1419); // WCAG AAA: 8.1:1 on bg
|
|
|
|
// Completed: Green - Success
|
|
static const Color completed = SvrntyColors.statusCompleted; // #22C55E
|
|
static const Color completedBackground = SvrntyColors.statusCompletedBg; // #D1FAE5
|
|
static const Color completedText = Color(0xFF065F46);
|
|
|
|
// Failed: Red - Problem
|
|
static const Color failed = SvrntyColors.statusFailed; // #EF4444
|
|
static const Color failedBackground = SvrntyColors.statusFailedBg; // #FEE2E2
|
|
static const Color failedText = Color(0xFF991B1B);
|
|
|
|
// Cancelled: Gray - Inactive
|
|
static const Color cancelled = SvrntyColors.statusCancelled; // #737A82
|
|
static const Color cancelledBackground = SvrntyColors.statusCancelledBg; // #F3F4F6
|
|
static const Color cancelledText = Color(0xFF1F2937); // WCAG AAA: 7.5:1 on bg
|
|
|
|
// On Hold: Slate Blue - Paused/Informational
|
|
static const Color onHold = SvrntyColors.statusOnHold; // #3A4958
|
|
static const Color onHoldBackground = SvrntyColors.statusOnHoldBg; // #E2E8F0
|
|
static const Color onHoldText = Color(0xFF1E293B);
|
|
|
|
/// Get status color by status type
|
|
static Color getStatusColor(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return pending;
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
case 'processing':
|
|
return inTransit;
|
|
case 'completed':
|
|
case 'delivered':
|
|
case 'done':
|
|
return completed;
|
|
case 'failed':
|
|
case 'error':
|
|
return failed;
|
|
case 'cancelled':
|
|
case 'skipped':
|
|
case 'rejected':
|
|
return cancelled;
|
|
case 'on_hold':
|
|
case 'paused':
|
|
case 'waiting':
|
|
return onHold;
|
|
default:
|
|
return inTransit;
|
|
}
|
|
}
|
|
|
|
/// Get status color from ColorScheme (preferred over hardcoded)
|
|
/// This method returns status colors that better integrate with the current theme
|
|
static Color getStatusColorFromTheme(String status, ColorScheme colorScheme) {
|
|
switch (status.toLowerCase()) {
|
|
case 'completed':
|
|
case 'delivered':
|
|
case 'done':
|
|
return colorScheme.tertiary; // Use theme green
|
|
case 'failed':
|
|
case 'error':
|
|
return colorScheme.error; // Use theme error
|
|
case 'pending':
|
|
return SvrntyColors.warning; // Keep custom warning
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
case 'processing':
|
|
return colorScheme.secondary; // Use theme secondary
|
|
case 'cancelled':
|
|
case 'skipped':
|
|
case 'rejected':
|
|
return colorScheme.onSurfaceVariant; // Use theme variant
|
|
case 'on_hold':
|
|
case 'paused':
|
|
case 'waiting':
|
|
return colorScheme.outline; // Use theme outline
|
|
default:
|
|
return getStatusColor(status); // Fallback to hardcoded
|
|
}
|
|
}
|
|
|
|
/// Get status background color by status type
|
|
static Color getStatusBackground(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return pendingBackground;
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
case 'processing':
|
|
return inTransitBackground;
|
|
case 'completed':
|
|
case 'delivered':
|
|
case 'done':
|
|
return completedBackground;
|
|
case 'failed':
|
|
case 'error':
|
|
return failedBackground;
|
|
case 'cancelled':
|
|
case 'skipped':
|
|
case 'rejected':
|
|
return cancelledBackground;
|
|
case 'on_hold':
|
|
case 'paused':
|
|
case 'waiting':
|
|
return onHoldBackground;
|
|
default:
|
|
return inTransitBackground;
|
|
}
|
|
}
|
|
|
|
/// Get status text color by status type
|
|
static Color getStatusText(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return pendingText;
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
case 'processing':
|
|
return inTransitText;
|
|
case 'completed':
|
|
case 'delivered':
|
|
case 'done':
|
|
return completedText;
|
|
case 'failed':
|
|
case 'error':
|
|
return failedText;
|
|
case 'cancelled':
|
|
case 'skipped':
|
|
case 'rejected':
|
|
return cancelledText;
|
|
case 'on_hold':
|
|
case 'paused':
|
|
case 'waiting':
|
|
return onHoldText;
|
|
default:
|
|
return inTransitText;
|
|
}
|
|
}
|
|
|
|
/// Get status icon by status type
|
|
static IconData getStatusIcon(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return Icons.schedule;
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
case 'processing':
|
|
return Icons.local_shipping;
|
|
case 'completed':
|
|
case 'delivered':
|
|
case 'done':
|
|
return Icons.check_circle;
|
|
case 'failed':
|
|
case 'error':
|
|
return Icons.error;
|
|
case 'cancelled':
|
|
case 'skipped':
|
|
case 'rejected':
|
|
return Icons.cancel;
|
|
case 'on_hold':
|
|
case 'paused':
|
|
case 'waiting':
|
|
return Icons.pause_circle;
|
|
default:
|
|
return Icons.info;
|
|
}
|
|
}
|
|
|
|
/// Get status label by status type
|
|
static String getStatusLabel(String status) {
|
|
switch (status.toLowerCase()) {
|
|
case 'pending':
|
|
return 'Pending';
|
|
case 'in_transit':
|
|
case 'in_progress':
|
|
return 'In Transit';
|
|
case 'processing':
|
|
return 'Processing';
|
|
case 'completed':
|
|
case 'delivered':
|
|
return 'Delivered';
|
|
case 'done':
|
|
return 'Completed';
|
|
case 'failed':
|
|
case 'error':
|
|
return 'Failed';
|
|
case 'cancelled':
|
|
return 'Cancelled';
|
|
case 'skipped':
|
|
return 'Skipped';
|
|
case 'rejected':
|
|
return 'Rejected';
|
|
case 'on_hold':
|
|
return 'On Hold';
|
|
case 'paused':
|
|
return 'Paused';
|
|
case 'waiting':
|
|
return 'Waiting';
|
|
default:
|
|
return status;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Status Badge Widget
|
|
class StatusBadgeWidget extends StatelessWidget {
|
|
final String status;
|
|
final bool showIcon;
|
|
final bool showLabel;
|
|
final double fontSize;
|
|
|
|
const StatusBadgeWidget({
|
|
super.key,
|
|
required this.status,
|
|
this.showIcon = true,
|
|
this.showLabel = true,
|
|
this.fontSize = 12,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: StatusColorScheme.getStatusBackground(status),
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
if (showIcon) ...[
|
|
Icon(
|
|
StatusColorScheme.getStatusIcon(status),
|
|
color: StatusColorScheme.getStatusColor(status),
|
|
size: fontSize + 2,
|
|
),
|
|
const SizedBox(width: 4),
|
|
],
|
|
if (showLabel)
|
|
Text(
|
|
StatusColorScheme.getStatusLabel(status),
|
|
style: TextStyle(
|
|
color: StatusColorScheme.getStatusColor(status),
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: fontSize,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Status Accent Bar Widget (for list items)
|
|
class StatusAccentBar extends StatelessWidget {
|
|
final String status;
|
|
final double width;
|
|
final double height;
|
|
|
|
const StatusAccentBar({
|
|
super.key,
|
|
required this.status,
|
|
this.width = 4,
|
|
this.height = 60,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: width,
|
|
height: height,
|
|
decoration: BoxDecoration(
|
|
color: StatusColorScheme.getStatusColor(status),
|
|
borderRadius: BorderRadius.circular(width / 2),
|
|
),
|
|
);
|
|
}
|
|
}
|