feat(ui): add onboarding and token-based themes
Introduce StartRouter to gate first run with onboarding. Persist state in SharedPreferences (onboarded_v1). Add WelcomeScreen, a 3-step OnboardingFlow, and a SignInScreen placeholder with Apple/Google buttons and "coming soon" toasts plus continue as guest. Apply new AppThemes (light/dark, high-contrast option) built from design tokens and wire into MaterialApp (theme/darkTheme, system mode). Add ThemeProvider to persist ThemeMode and high-contrast flags (not yet hooked into the tree). Add EN/MS i18n strings for welcome, onboarding, auth, and CTAs. Include assets/tokens/design-tokens.json for design tooling parity.
This commit is contained in:
347
lib/theme/themes.dart
Normal file
347
lib/theme/themes.dart
Normal file
@@ -0,0 +1,347 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Design tokens and themes for FixMate (Civic Pro Minimal)
|
||||
class AppColors {
|
||||
static const Color brandPrimary = Color(0xFF1E5CE0);
|
||||
static const Color brandPrimaryDark = Color(0xFF1748AC);
|
||||
static const Color brandPrimaryLight = Color(0xFF8CB0FF);
|
||||
|
||||
static const Color neutral0 = Color(0xFFFFFFFF);
|
||||
static const Color neutral10 = Color(0xFFF5F7FB);
|
||||
static const Color neutral20 = Color(0xFFE9EDF5);
|
||||
static const Color neutral30 = Color(0xFFD8DFEB);
|
||||
static const Color neutral40 = Color(0xFFB8C2D5);
|
||||
static const Color neutral50 = Color(0xFF99A3B8);
|
||||
static const Color neutral60 = Color(0xFF7A859E);
|
||||
static const Color neutral70 = Color(0xFF5C6782);
|
||||
static const Color neutral80 = Color(0xFF3D4765);
|
||||
static const Color neutral90 = Color(0xFF21283C);
|
||||
static const Color neutral100 = Color(0xFF0E1322);
|
||||
|
||||
static const Color success = Color(0xFF2E7D32);
|
||||
static const Color warning = Color(0xFFED6C02);
|
||||
static const Color error = Color(0xFFD32F2F);
|
||||
static const Color info = Color(0xFF0288D1);
|
||||
}
|
||||
|
||||
class AppRadii {
|
||||
static const double xs = 6;
|
||||
static const double sm = 8;
|
||||
static const double md = 12;
|
||||
static const double lg = 16;
|
||||
static const double xl = 24;
|
||||
static const double pill = 100;
|
||||
}
|
||||
|
||||
class AppSpacing {
|
||||
static const double x1 = 4;
|
||||
static const double x2 = 8;
|
||||
static const double x3 = 12;
|
||||
static const double x4 = 16;
|
||||
static const double x5 = 20;
|
||||
static const double x6 = 24;
|
||||
static const double x8 = 32;
|
||||
static const double x10 = 40;
|
||||
static const double x12 = 48;
|
||||
static const double x16 = 64;
|
||||
}
|
||||
|
||||
class AppMotion {
|
||||
static const Duration fast = Duration(milliseconds: 120);
|
||||
static const Duration medium = Duration(milliseconds: 200);
|
||||
static const Duration slow = Duration(milliseconds: 300);
|
||||
static const Duration slower = Duration(milliseconds: 450);
|
||||
|
||||
static const Curve standard = Curves.easeOutCubic;
|
||||
static const Curve accelerate = Curves.easeInCubic;
|
||||
static const Curve decelerate = Curves.easeOutCubic;
|
||||
static const Curve emphasize = Cubic(0.2, 0.0, 0.0, 1.0);
|
||||
}
|
||||
|
||||
class AppThemes {
|
||||
static const PageTransitionsTheme transitions = PageTransitionsTheme(
|
||||
builders: {
|
||||
TargetPlatform.android: ZoomPageTransitionsBuilder(),
|
||||
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
|
||||
TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
|
||||
TargetPlatform.linux: FadeUpwardsPageTransitionsBuilder(),
|
||||
TargetPlatform.windows: FadeUpwardsPageTransitionsBuilder(),
|
||||
},
|
||||
);
|
||||
|
||||
static ThemeData light() {
|
||||
final colorScheme = ColorScheme.fromSeed(
|
||||
seedColor: AppColors.brandPrimary,
|
||||
brightness: Brightness.light,
|
||||
primary: AppColors.brandPrimary,
|
||||
);
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: colorScheme,
|
||||
scaffoldBackgroundColor: AppColors.neutral10,
|
||||
canvasColor: AppColors.neutral10,
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: colorScheme.surface,
|
||||
foregroundColor: colorScheme.onSurface,
|
||||
elevation: 0,
|
||||
centerTitle: false,
|
||||
titleTextStyle: TextStyle(
|
||||
color: colorScheme.onSurface,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
||||
textStyle: const TextStyle(fontWeight: FontWeight.w600),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: colorScheme.primary,
|
||||
side: BorderSide(color: colorScheme.primary, width: 1.2),
|
||||
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: colorScheme.primary,
|
||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.md),
|
||||
),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: colorScheme.surfaceVariant.withOpacity(0.5),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral30),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral30),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: colorScheme.primary, width: 1.6),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: AppSpacing.x4,
|
||||
horizontal: AppSpacing.x4,
|
||||
),
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
color: colorScheme.surface,
|
||||
elevation: 1,
|
||||
margin: const EdgeInsets.all(0),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: colorScheme.surfaceVariant,
|
||||
selectedColor: colorScheme.primary.withOpacity(0.14),
|
||||
secondarySelectedColor: colorScheme.primary.withOpacity(0.14),
|
||||
labelStyle: TextStyle(color: colorScheme.onSurface),
|
||||
secondaryLabelStyle: TextStyle(color: colorScheme.onSurface),
|
||||
brightness: Brightness.light,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.md),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
),
|
||||
dialogTheme: DialogThemeData(
|
||||
backgroundColor: colorScheme.surface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.xl),
|
||||
),
|
||||
),
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: AppColors.neutral90,
|
||||
contentTextStyle: const TextStyle(color: Colors.white),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||
backgroundColor: colorScheme.surface,
|
||||
selectedItemColor: colorScheme.primary,
|
||||
unselectedItemColor: AppColors.neutral60,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
|
||||
),
|
||||
pageTransitionsTheme: transitions,
|
||||
visualDensity: VisualDensity.standard,
|
||||
);
|
||||
}
|
||||
|
||||
static ThemeData dark() {
|
||||
final colorScheme = ColorScheme.fromSeed(
|
||||
seedColor: AppColors.brandPrimary,
|
||||
brightness: Brightness.dark,
|
||||
primary: AppColors.brandPrimaryLight,
|
||||
);
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
colorScheme: colorScheme,
|
||||
scaffoldBackgroundColor: AppColors.neutral100,
|
||||
canvasColor: AppColors.neutral100,
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: colorScheme.surface,
|
||||
foregroundColor: colorScheme.onSurface,
|
||||
elevation: 0,
|
||||
centerTitle: false,
|
||||
titleTextStyle: TextStyle(
|
||||
color: colorScheme.onSurface,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
||||
textStyle: const TextStyle(fontWeight: FontWeight.w600),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: colorScheme.primary,
|
||||
side: BorderSide(color: colorScheme.primary, width: 1.2),
|
||||
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
),
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral80),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral80),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: colorScheme.primary, width: 1.6),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
vertical: AppSpacing.x4,
|
||||
horizontal: AppSpacing.x4,
|
||||
),
|
||||
),
|
||||
cardTheme: CardThemeData(
|
||||
color: colorScheme.surface,
|
||||
elevation: 1,
|
||||
margin: const EdgeInsets.all(0),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: colorScheme.surfaceVariant.withOpacity(0.5),
|
||||
selectedColor: colorScheme.primary.withOpacity(0.22),
|
||||
secondarySelectedColor: colorScheme.primary.withOpacity(0.22),
|
||||
labelStyle: TextStyle(color: colorScheme.onSurface),
|
||||
secondaryLabelStyle: TextStyle(color: colorScheme.onSurface),
|
||||
brightness: Brightness.dark,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.md),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
),
|
||||
dialogTheme: DialogThemeData(
|
||||
backgroundColor: colorScheme.surface,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.xl),
|
||||
),
|
||||
),
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: AppColors.neutral90,
|
||||
contentTextStyle: const TextStyle(color: Colors.white),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
),
|
||||
),
|
||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||
backgroundColor: colorScheme.surface,
|
||||
selectedItemColor: colorScheme.primary,
|
||||
unselectedItemColor: AppColors.neutral60,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
selectedLabelStyle: const TextStyle(fontWeight: FontWeight.w600),
|
||||
),
|
||||
pageTransitionsTheme: transitions,
|
||||
visualDensity: VisualDensity.standard,
|
||||
);
|
||||
}
|
||||
|
||||
static ThemeData highContrast() {
|
||||
// High-contrast light theme with stronger borders and higher on-color contrast
|
||||
final base = light();
|
||||
final cs = base.colorScheme;
|
||||
final highCs = cs.copyWith(
|
||||
primary: AppColors.brandPrimaryDark,
|
||||
onPrimary: Colors.white,
|
||||
surface: AppColors.neutral0,
|
||||
onSurface: AppColors.neutral100,
|
||||
surfaceTint: Colors.transparent,
|
||||
);
|
||||
return base.copyWith(
|
||||
colorScheme: highCs,
|
||||
inputDecorationTheme: base.inputDecorationTheme.copyWith(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral80, width: 2),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: AppColors.neutral80, width: 2),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadii.lg),
|
||||
borderSide: BorderSide(color: highCs.primary, width: 2.2),
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: highCs.primary,
|
||||
foregroundColor: highCs.onPrimary,
|
||||
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 18),
|
||||
textStyle: const TextStyle(fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: BorderSide(color: highCs.primary, width: 2),
|
||||
),
|
||||
),
|
||||
snackBarTheme: base.snackBarTheme.copyWith(
|
||||
backgroundColor: Colors.black,
|
||||
contentTextStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w700),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user