1ea85d5ed1
- Updated error handling in EnhancedErrorService to utilize context for color tokens, improving theme consistency. - Refactored various components to use context-aware shadow and color properties, enhancing visual coherence. - Replaced hardcoded color values with dynamic tokens in multiple widgets, ensuring better adaptability to theme changes. - Improved overall code maintainability by centralizing theme-related logic and reducing direct dependencies on static theme values.
382 lines
13 KiB
Dart
382 lines
13 KiB
Dart
import 'dart:math' as math;
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter_animate/flutter_animate.dart';
|
|
import 'theme_extensions.dart';
|
|
import 'color_palettes.dart';
|
|
import 'color_tokens.dart';
|
|
|
|
class AppTheme {
|
|
// Enhanced neutral palette for better contrast (WCAG AA compliant)
|
|
static const Color neutral900 = Color(0xFF0B0E14);
|
|
static const Color neutral800 = Color(0xFF161B24);
|
|
static const Color neutral700 = Color(0xFF1F2531);
|
|
static const Color neutral600 = Color(0xFF343C4D);
|
|
static const Color neutral500 = Color(0xFF4A5161);
|
|
static const Color neutral400 = Color(0xFF9099AC);
|
|
static const Color neutral300 = Color(0xFFC5CCD9);
|
|
static const Color neutral200 = Color(0xFFE6EAF1);
|
|
static const Color neutral100 = Color(0xFFF5F7FA);
|
|
static const Color neutral50 = Color(0xFFFFFFFF);
|
|
|
|
// Semantic colors derived from the token specification
|
|
static const Color error = Color(0xFFCE2C31);
|
|
static const Color errorDark = Color(0xFFFF5F67);
|
|
static const Color success = Color(0xFF0E9D58);
|
|
static const Color successDark = Color(0xFF23C179);
|
|
static const Color warning = Color(0xFFDB7900);
|
|
static const Color warningDark = Color(0xFFFF9800);
|
|
static const Color info = Color(0xFF0174D3);
|
|
static const Color infoDark = Color(0xFF4CA8FF);
|
|
|
|
static ThemeData light(AppColorPalette palette) {
|
|
final lightTone = palette.light;
|
|
final tokens = AppColorTokens.light(palette: palette);
|
|
final colorScheme = tokens.toColorScheme().copyWith(
|
|
primary: lightTone.primary,
|
|
onPrimary: _pickOnColor(lightTone.primary, tokens),
|
|
secondary: lightTone.secondary,
|
|
onSecondary: _pickOnColor(lightTone.secondary, tokens),
|
|
tertiary: lightTone.accent,
|
|
onTertiary: _pickOnColor(lightTone.accent, tokens),
|
|
surfaceTint: lightTone.primary,
|
|
);
|
|
|
|
return ThemeData(
|
|
useMaterial3: true,
|
|
brightness: Brightness.light,
|
|
colorScheme: colorScheme,
|
|
pageTransitionsTheme: _pageTransitionsTheme,
|
|
splashFactory: NoSplash.splashFactory,
|
|
scaffoldBackgroundColor: tokens.neutralTone10,
|
|
appBarTheme: AppBarTheme(
|
|
centerTitle: true,
|
|
elevation: Elevation.none,
|
|
backgroundColor: Colors.transparent,
|
|
foregroundColor: tokens.neutralOnSurface,
|
|
),
|
|
bottomSheetTheme: BottomSheetThemeData(
|
|
backgroundColor: tokens.neutralTone00,
|
|
modalBackgroundColor: tokens.neutralTone00,
|
|
surfaceTintColor: Colors.transparent,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.modal),
|
|
),
|
|
showDragHandle: false,
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Spacing.lg,
|
|
vertical: Spacing.xs,
|
|
),
|
|
backgroundColor: lightTone.primary,
|
|
foregroundColor: _pickOnColor(lightTone.primary, tokens),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
),
|
|
),
|
|
),
|
|
cardTheme: CardThemeData(
|
|
elevation: Elevation.none,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
|
|
side: BorderSide(color: tokens.neutralTone20),
|
|
),
|
|
),
|
|
snackBarTheme: SnackBarThemeData(
|
|
behavior: SnackBarBehavior.floating,
|
|
backgroundColor: Color.alphaBlend(
|
|
tokens.overlayStrong,
|
|
tokens.neutralOnSurface,
|
|
),
|
|
contentTextStyle: TextStyle(
|
|
color: tokens.neutralTone00,
|
|
fontSize: AppTypography.bodyMedium,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.snackbar),
|
|
),
|
|
elevation: Elevation.high,
|
|
),
|
|
inputDecorationTheme: InputDecorationTheme(
|
|
filled: true,
|
|
fillColor: tokens.neutralTone00,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: lightTone.primary, width: 2),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: tokens.statusError60, width: 1),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: Spacing.md,
|
|
vertical: Spacing.sm,
|
|
),
|
|
),
|
|
textTheme: ThemeData.light().textTheme,
|
|
extensions: <ThemeExtension<dynamic>>[
|
|
tokens,
|
|
ConduitThemeExtension.lightPalette(palette: palette, tokens: tokens),
|
|
AppPaletteThemeExtension(palette: palette),
|
|
],
|
|
);
|
|
}
|
|
|
|
static ThemeData dark(AppColorPalette palette) {
|
|
final darkTone = palette.dark;
|
|
final tokens = AppColorTokens.dark(palette: palette);
|
|
final colorScheme = tokens.toColorScheme().copyWith(
|
|
primary: darkTone.primary,
|
|
onPrimary: _pickOnColor(darkTone.primary, tokens),
|
|
secondary: darkTone.secondary,
|
|
onSecondary: _pickOnColor(darkTone.secondary, tokens),
|
|
tertiary: darkTone.accent,
|
|
onTertiary: _pickOnColor(darkTone.accent, tokens),
|
|
surfaceTint: darkTone.primary,
|
|
);
|
|
|
|
return ThemeData(
|
|
useMaterial3: true,
|
|
brightness: Brightness.dark,
|
|
colorScheme: colorScheme,
|
|
scaffoldBackgroundColor: tokens.neutralTone10,
|
|
pageTransitionsTheme: _pageTransitionsTheme,
|
|
splashFactory: NoSplash.splashFactory,
|
|
appBarTheme: AppBarTheme(
|
|
centerTitle: true,
|
|
elevation: Elevation.none,
|
|
backgroundColor: Colors.transparent,
|
|
foregroundColor: tokens.neutralOnSurface,
|
|
),
|
|
bottomSheetTheme: BottomSheetThemeData(
|
|
backgroundColor: tokens.neutralTone00,
|
|
modalBackgroundColor: tokens.neutralTone00,
|
|
surfaceTintColor: Colors.transparent,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.modal),
|
|
),
|
|
showDragHandle: false,
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Spacing.lg,
|
|
vertical: Spacing.xs,
|
|
),
|
|
backgroundColor: darkTone.primary,
|
|
foregroundColor: _pickOnColor(darkTone.primary, tokens),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
),
|
|
),
|
|
),
|
|
cardTheme: CardThemeData(
|
|
elevation: Elevation.none,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
|
|
side: BorderSide(color: tokens.neutralTone40),
|
|
),
|
|
),
|
|
snackBarTheme: SnackBarThemeData(
|
|
behavior: SnackBarBehavior.floating,
|
|
backgroundColor: Color.alphaBlend(
|
|
tokens.overlayStrong,
|
|
tokens.neutralTone20,
|
|
),
|
|
contentTextStyle: TextStyle(
|
|
color: tokens.neutralOnSurface,
|
|
fontSize: AppTypography.bodyMedium,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.snackbar),
|
|
),
|
|
elevation: Elevation.high,
|
|
),
|
|
inputDecorationTheme: InputDecorationTheme(
|
|
filled: true,
|
|
fillColor: tokens.neutralTone20,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: tokens.neutralTone40, width: 1),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: tokens.neutralTone40, width: 1),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: darkTone.primary, width: 2),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
|
borderSide: BorderSide(color: tokens.statusError60, width: 1),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: Spacing.md,
|
|
vertical: Spacing.sm,
|
|
),
|
|
),
|
|
textTheme: ThemeData.dark().textTheme,
|
|
extensions: <ThemeExtension<dynamic>>[
|
|
tokens,
|
|
ConduitThemeExtension.darkPalette(palette: palette, tokens: tokens),
|
|
AppPaletteThemeExtension(palette: palette),
|
|
],
|
|
);
|
|
}
|
|
|
|
static CupertinoThemeData cupertinoTheme(
|
|
BuildContext context,
|
|
AppColorPalette palette,
|
|
) {
|
|
final brightness = Theme.of(context).brightness;
|
|
final tone = palette.toneFor(brightness);
|
|
final tokens = brightness == Brightness.dark
|
|
? AppColorTokens.dark(palette: palette)
|
|
: AppColorTokens.light(palette: palette);
|
|
return CupertinoThemeData(
|
|
brightness: brightness,
|
|
primaryColor: tone.primary,
|
|
scaffoldBackgroundColor: tokens.neutralTone10,
|
|
barBackgroundColor: tokens.neutralTone10,
|
|
);
|
|
}
|
|
|
|
static Color _pickOnColor(Color background, AppColorTokens tokens) {
|
|
final contrastOnLight = _contrastRatio(background, tokens.neutralTone00);
|
|
final contrastOnDark = _contrastRatio(background, tokens.neutralOnSurface);
|
|
return contrastOnLight >= contrastOnDark
|
|
? tokens.neutralTone00
|
|
: tokens.neutralOnSurface;
|
|
}
|
|
|
|
static double _contrastRatio(Color a, Color b) {
|
|
final luminanceA = a.computeLuminance();
|
|
final luminanceB = b.computeLuminance();
|
|
final lighter = math.max(luminanceA, luminanceB);
|
|
final darker = math.min(luminanceA, luminanceB);
|
|
return (lighter + 0.05) / (darker + 0.05);
|
|
}
|
|
|
|
static const PageTransitionsTheme _pageTransitionsTheme =
|
|
PageTransitionsTheme(
|
|
builders: <TargetPlatform, PageTransitionsBuilder>{
|
|
TargetPlatform.android: ZoomPageTransitionsBuilder(),
|
|
TargetPlatform.iOS: ZoomPageTransitionsBuilder(),
|
|
TargetPlatform.linux: ZoomPageTransitionsBuilder(),
|
|
TargetPlatform.macOS: ZoomPageTransitionsBuilder(),
|
|
TargetPlatform.windows: ZoomPageTransitionsBuilder(),
|
|
},
|
|
);
|
|
}
|
|
|
|
/// Animated theme wrapper for smooth theme transitions
|
|
class AnimatedThemeWrapper extends StatefulWidget {
|
|
final Widget child;
|
|
final ThemeData theme;
|
|
final Duration duration;
|
|
|
|
const AnimatedThemeWrapper({
|
|
super.key,
|
|
required this.child,
|
|
required this.theme,
|
|
this.duration = const Duration(milliseconds: 250),
|
|
});
|
|
|
|
@override
|
|
State<AnimatedThemeWrapper> createState() => _AnimatedThemeWrapperState();
|
|
}
|
|
|
|
class _AnimatedThemeWrapperState extends State<AnimatedThemeWrapper>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _controller;
|
|
late Animation<double> _animation;
|
|
ThemeData? _previousTheme;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(duration: widget.duration, vsync: this);
|
|
_animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
|
|
_previousTheme = widget.theme;
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(AnimatedThemeWrapper oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (oldWidget.theme != widget.theme) {
|
|
_previousTheme = oldWidget.theme;
|
|
_controller.forward(from: 0);
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
void deactivate() {
|
|
// Pause animations during deactivation to avoid rebuilds in wrong build scope
|
|
_controller.stop();
|
|
super.deactivate();
|
|
}
|
|
|
|
@override
|
|
void activate() {
|
|
super.activate();
|
|
// If a theme transition was in progress, resume it
|
|
if (_controller.value < 1.0 && !_controller.isAnimating) {
|
|
_controller.forward();
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedBuilder(
|
|
animation: _animation,
|
|
builder: (context, child) {
|
|
return Theme(
|
|
data: ThemeData.lerp(
|
|
_previousTheme ?? widget.theme,
|
|
widget.theme,
|
|
_animation.value,
|
|
),
|
|
child: widget.child,
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Theme transition widget for individual components
|
|
class ThemeTransition extends StatelessWidget {
|
|
final Widget child;
|
|
final Duration duration;
|
|
|
|
const ThemeTransition({
|
|
super.key,
|
|
required this.child,
|
|
this.duration = const Duration(milliseconds: 200),
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return child.animate().fadeIn(duration: duration);
|
|
}
|
|
}
|
|
|
|
// Typography, spacing, and design token classes are now in theme_extensions.dart for consistency
|