feat: replace mail protocol with smolmail and rebuild the UI
This commit is contained in:
parent
cb24b68069
commit
e94e4158cc
93 changed files with 6387 additions and 3479 deletions
78
lib/presentation/theme/app_colors.dart
Normal file
78
lib/presentation/theme/app_colors.dart
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import "package:flutter/material.dart";
|
||||
|
||||
/// Theme-aware colors that don't map onto a standard [ColorScheme] role.
|
||||
/// Access via `Theme.of(context).extension<AppColors>()!`.
|
||||
class AppColors extends ThemeExtension<AppColors> {
|
||||
const AppColors({
|
||||
required this.cardFill,
|
||||
required this.highlight,
|
||||
required this.snippetText,
|
||||
required this.avatarPalette,
|
||||
});
|
||||
|
||||
/// Elevated surface used for input fields, list tiles, and cards.
|
||||
final Color cardFill;
|
||||
|
||||
/// Pressed/selected state highlight (e.g. active drawer item).
|
||||
final Color highlight;
|
||||
|
||||
/// Dimmed body text, e.g. message preview snippets.
|
||||
final Color snippetText;
|
||||
|
||||
/// Deterministic background colors for contact avatars.
|
||||
final List<Color> avatarPalette;
|
||||
|
||||
static const dark = AppColors(
|
||||
cardFill: Color.fromRGBO(22, 39, 56, 1),
|
||||
highlight: Color.fromRGBO(40, 70, 100, 1),
|
||||
snippetText: Color.fromRGBO(193, 203, 213, 1),
|
||||
avatarPalette: [
|
||||
Color.fromRGBO(63, 207, 142, 1),
|
||||
Color.fromRGBO(90, 156, 240, 1),
|
||||
Color.fromRGBO(240, 176, 90, 1),
|
||||
Color.fromRGBO(214, 110, 140, 1),
|
||||
Color.fromRGBO(154, 133, 230, 1),
|
||||
Color.fromRGBO(90, 200, 210, 1),
|
||||
],
|
||||
);
|
||||
|
||||
static const light = AppColors(
|
||||
cardFill: Color.fromRGBO(236, 240, 243, 1),
|
||||
highlight: Color.fromRGBO(210, 231, 248, 1),
|
||||
snippetText: Color.fromRGBO(91, 100, 112, 1),
|
||||
avatarPalette: [
|
||||
Color.fromRGBO(43, 175, 116, 1),
|
||||
Color.fromRGBO(56, 116, 203, 1),
|
||||
Color.fromRGBO(196, 132, 41, 1),
|
||||
Color.fromRGBO(180, 76, 108, 1),
|
||||
Color.fromRGBO(115, 92, 199, 1),
|
||||
Color.fromRGBO(46, 152, 163, 1),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
AppColors copyWith({
|
||||
Color? cardFill,
|
||||
Color? highlight,
|
||||
Color? snippetText,
|
||||
List<Color>? avatarPalette,
|
||||
}) {
|
||||
return AppColors(
|
||||
cardFill: cardFill ?? this.cardFill,
|
||||
highlight: highlight ?? this.highlight,
|
||||
snippetText: snippetText ?? this.snippetText,
|
||||
avatarPalette: avatarPalette ?? this.avatarPalette,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
AppColors lerp(ThemeExtension<AppColors>? other, double t) {
|
||||
if (other is! AppColors) return this;
|
||||
return AppColors(
|
||||
cardFill: Color.lerp(cardFill, other.cardFill, t)!,
|
||||
highlight: Color.lerp(highlight, other.highlight, t)!,
|
||||
snippetText: Color.lerp(snippetText, other.snippetText, t)!,
|
||||
avatarPalette: t < 0.5 ? avatarPalette : other.avatarPalette,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +1,143 @@
|
|||
import "package:flutter/material.dart";
|
||||
|
||||
final ThemeData appTheme = ThemeData(
|
||||
colorScheme: ColorScheme.fromSwatch().copyWith(
|
||||
primary: const Color.fromRGBO(63, 207, 142, 1),
|
||||
background: const Color.fromRGBO(1, 17, 29, 1),
|
||||
),
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: Color.fromRGBO(1, 17, 29, 1),
|
||||
iconTheme: IconThemeData(
|
||||
color: Colors.white,
|
||||
size: 30,
|
||||
),
|
||||
titleTextStyle: TextStyle(
|
||||
color: Colors.white,
|
||||
fontFamily: "Inter",
|
||||
fontWeight: FontWeight.w900,
|
||||
fontSize: 30,
|
||||
),
|
||||
elevation: 0.0,
|
||||
),
|
||||
textTheme: const TextTheme(
|
||||
bodySmall: TextStyle(
|
||||
import "package:smol_mail/presentation/theme/app_colors.dart";
|
||||
|
||||
const _seedColor = Color.fromRGBO(63, 207, 142, 1);
|
||||
const _darkSurface = Color.fromRGBO(1, 17, 29, 1);
|
||||
|
||||
TextTheme _textTheme(TextTheme base, Color mutedColor) {
|
||||
return base.copyWith(
|
||||
bodySmall: base.bodySmall?.copyWith(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 16,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
bodyMedium: TextStyle(
|
||||
bodyMedium: base.bodyMedium?.copyWith(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 20,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
bodyLarge: TextStyle(
|
||||
bodyLarge: base.bodyLarge?.copyWith(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 24,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
titleMedium: TextStyle(
|
||||
color: Colors.white,
|
||||
titleMedium: base.titleMedium?.copyWith(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w300,
|
||||
),
|
||||
titleLarge: TextStyle(
|
||||
titleLarge: base.titleLarge?.copyWith(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 35,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w900,
|
||||
),
|
||||
labelSmall: TextStyle(
|
||||
labelSmall: base.labelSmall?.copyWith(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 16,
|
||||
color: Color.fromRGBO(127, 133, 140, 1),
|
||||
color: mutedColor,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
snackBarTheme: const SnackBarThemeData(
|
||||
backgroundColor: Colors.red,
|
||||
contentTextStyle: TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 16,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color.fromRGBO(63, 207, 142, 1),
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
);
|
||||
}
|
||||
|
||||
ThemeData _buildTheme(ColorScheme scheme, AppColors appColors) {
|
||||
return ThemeData(
|
||||
colorScheme: scheme,
|
||||
// ThemeData defaults this legacy field to Colors.grey[900] on a dark
|
||||
// theme when unset, which is nearly invisible against our dark surfaces —
|
||||
// several screens still read it via Theme.of(context).primaryColor.
|
||||
primaryColor: scheme.primary,
|
||||
scaffoldBackgroundColor: scheme.surface,
|
||||
extensions: [appColors],
|
||||
appBarTheme: AppBarTheme(
|
||||
backgroundColor: scheme.surface,
|
||||
iconTheme: IconThemeData(color: scheme.onSurface, size: 30),
|
||||
titleTextStyle: TextStyle(
|
||||
color: scheme.onSurface,
|
||||
fontFamily: "Inter",
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w900,
|
||||
fontSize: 30,
|
||||
),
|
||||
elevation: 0.0,
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: const Color.fromRGBO(63, 207, 412, 1),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
textTheme: _textTheme(
|
||||
ThemeData(brightness: scheme.brightness).textTheme,
|
||||
scheme.onSurfaceVariant,
|
||||
),
|
||||
snackBarTheme: SnackBarThemeData(
|
||||
backgroundColor: scheme.inverseSurface,
|
||||
contentTextStyle: TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 17,
|
||||
fontSize: 16,
|
||||
color: scheme.onInverseSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
useMaterial3: true,
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: scheme.primary,
|
||||
foregroundColor: scheme.onPrimary,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: scheme.primary,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 17,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Without this, an empty/unfocused field's resting label inherits
|
||||
// bodyLarge (24px bold) — that's what made "Host" etc. look huge.
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
labelStyle: TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: scheme.onSurfaceVariant,
|
||||
),
|
||||
floatingLabelStyle: TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: scheme.primary,
|
||||
),
|
||||
hintStyle: TextStyle(
|
||||
fontFamily: "Inter",
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: scheme.onSurfaceVariant,
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
),
|
||||
useMaterial3: true,
|
||||
);
|
||||
}
|
||||
|
||||
final ThemeData appThemeDark = _buildTheme(
|
||||
ColorScheme.fromSeed(
|
||||
seedColor: _seedColor,
|
||||
brightness: Brightness.dark,
|
||||
).copyWith(surface: _darkSurface),
|
||||
AppColors.dark,
|
||||
);
|
||||
|
||||
final ThemeData appThemeLight = _buildTheme(
|
||||
ColorScheme.fromSeed(
|
||||
seedColor: _seedColor,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
AppColors.light,
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue