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>
147 lines
5.0 KiB
Dart
147 lines
5.0 KiB
Dart
import 'package:flutter/material.dart';
|
||
|
||
/// Svrnty Border System - Border Radius Constants
|
||
/// All border radius values follow a strict 4px grid
|
||
class AppBorders {
|
||
// Prevent instantiation
|
||
AppBorders._();
|
||
|
||
// ============================================
|
||
// BORDER RADIUS VALUES (4px Grid)
|
||
// ============================================
|
||
|
||
/// Extra small border radius (4px) - unit × 1
|
||
/// Used for: Subtle rounding on chips, tags, small elements
|
||
static const double radiusXs = 4.0;
|
||
|
||
/// Small border radius (8px) - unit × 2
|
||
/// Used for: Buttons, inputs, small cards
|
||
static const double radiusSm = 8.0;
|
||
|
||
/// Medium border radius (12px) - unit × 3
|
||
/// Used for: Cards, dropdowns, standard components
|
||
static const double radiusMd = 12.0;
|
||
|
||
/// Large border radius (16px) - unit × 4
|
||
/// Used for: Dialogs, large cards, prominent containers
|
||
static const double radiusLg = 16.0;
|
||
|
||
/// Extra large border radius (24px) - unit × 6
|
||
/// Used for: Containers, large surfaces
|
||
static const double radiusXl = 24.0;
|
||
|
||
/// Fully rounded border radius (999px)
|
||
/// Used for: Pills, badges, fully circular elements
|
||
static const double radiusRound = 999.0;
|
||
|
||
// ============================================
|
||
// BORDER RADIUS - BORDERRADIUS OBJECTS
|
||
// ============================================
|
||
|
||
/// BorderRadius.circular(4px)
|
||
static const BorderRadius circularXs = BorderRadius.all(Radius.circular(radiusXs));
|
||
|
||
/// BorderRadius.circular(8px)
|
||
static const BorderRadius circularSm = BorderRadius.all(Radius.circular(radiusSm));
|
||
|
||
/// BorderRadius.circular(12px)
|
||
static const BorderRadius circularMd = BorderRadius.all(Radius.circular(radiusMd));
|
||
|
||
/// BorderRadius.circular(16px)
|
||
static const BorderRadius circularLg = BorderRadius.all(Radius.circular(radiusLg));
|
||
|
||
/// BorderRadius.circular(24px)
|
||
static const BorderRadius circularXl = BorderRadius.all(Radius.circular(radiusXl));
|
||
|
||
/// BorderRadius.circular(999px) - Fully rounded
|
||
static const BorderRadius circularRound = BorderRadius.all(Radius.circular(radiusRound));
|
||
|
||
// ============================================
|
||
// BORDER RADIUS - TOP ONLY (for bottom sheets)
|
||
// ============================================
|
||
|
||
/// BorderRadius with top corners rounded (8px)
|
||
static const BorderRadius topSmallRadius = BorderRadius.only(
|
||
topLeft: Radius.circular(radiusSm),
|
||
topRight: Radius.circular(radiusSm),
|
||
);
|
||
|
||
/// BorderRadius with top corners rounded (12px)
|
||
static const BorderRadius topMediumRadius = BorderRadius.only(
|
||
topLeft: Radius.circular(radiusMd),
|
||
topRight: Radius.circular(radiusMd),
|
||
);
|
||
|
||
/// BorderRadius with top corners rounded (16px)
|
||
static const BorderRadius topLargeRadius = BorderRadius.only(
|
||
topLeft: Radius.circular(radiusLg),
|
||
topRight: Radius.circular(radiusLg),
|
||
);
|
||
|
||
// ============================================
|
||
// COMPONENT BORDER RADIUS MAPPING
|
||
// ============================================
|
||
|
||
/// Button border radius (8px - radiusSm)
|
||
static const double buttonRadius = radiusSm;
|
||
|
||
/// Input field border radius (8px - radiusSm)
|
||
static const double inputRadius = radiusSm;
|
||
|
||
/// Card border radius (12px - radiusMd)
|
||
static const double cardRadius = radiusMd;
|
||
|
||
/// Dialog border radius (16px - radiusLg)
|
||
static const double dialogRadius = radiusLg;
|
||
|
||
/// Chip border radius (999px - radiusRound, fully rounded)
|
||
static const double chipRadius = radiusRound;
|
||
|
||
/// Bottom sheet border radius (16px - radiusLg)
|
||
static const double bottomSheetRadius = radiusLg;
|
||
|
||
/// Dropdown border radius (8px - radiusSm)
|
||
static const double dropdownRadius = radiusSm;
|
||
|
||
/// Small component border radius (4px - radiusXs)
|
||
static const double smallComponentRadius = radiusXs;
|
||
|
||
// ============================================
|
||
// BORDER RADIUS SHAPE OBJECTS
|
||
// ============================================
|
||
|
||
/// RoundedRectangleBorder for buttons (8px radius)
|
||
static const ShapeBorder buttonShape = RoundedRectangleBorder(
|
||
borderRadius: circularSm,
|
||
);
|
||
|
||
/// RoundedRectangleBorder for cards (12px radius)
|
||
static const ShapeBorder cardShape = RoundedRectangleBorder(
|
||
borderRadius: circularMd,
|
||
);
|
||
|
||
/// RoundedRectangleBorder for dialogs (16px radius)
|
||
static const ShapeBorder dialogShape = RoundedRectangleBorder(
|
||
borderRadius: circularLg,
|
||
);
|
||
|
||
// ============================================
|
||
// COMPONENT BORDER RADIUS OBJECTS
|
||
// ============================================
|
||
|
||
/// Small component border radius (4px - Radius object)
|
||
static const Radius smallRadius = Radius.circular(radiusXs);
|
||
|
||
/// Button border radius (8px - Radius object)
|
||
static const Radius buttonBorderRadius = Radius.circular(radiusSm);
|
||
|
||
/// Card border radius (12px - Radius object)
|
||
static const Radius cardBorderRadius = Radius.circular(radiusMd);
|
||
|
||
/// Dialog border radius (16px - Radius object)
|
||
static const Radius dialogBorderRadius = Radius.circular(radiusLg);
|
||
|
||
/// Fully rounded (999px - Radius object)
|
||
static const Radius fullRoundRadius = Radius.circular(radiusRound);
|
||
}
|