504 lines
18 KiB
Dart
504 lines
18 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'theme/component_themes.dart';
|
|
|
|
class MaterialTheme {
|
|
final TextTheme textTheme;
|
|
|
|
const MaterialTheme(this.textTheme);
|
|
|
|
// Svrnty Brand Colors - Light Theme
|
|
static ColorScheme lightScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.light,
|
|
primary: Color(0xffDF2D45), // Svrnty Crimson Red (updated)
|
|
surfaceTint: Color(0xffDF2D45),
|
|
onPrimary: Color(0xffffffff),
|
|
primaryContainer: Color(0xffFFE0E5),
|
|
onPrimaryContainer: Color(0xff06080C),
|
|
secondary: Color(0xff3A4958), // Svrnty Dark Slate
|
|
onSecondary: Color(0xffffffff),
|
|
secondaryContainer: Color(0xffD0DCE8),
|
|
onSecondaryContainer: Color(0xff06080C),
|
|
tertiary: Color(0xff1D2C39), // Svrnty Teal
|
|
onTertiary: Color(0xffffffff),
|
|
tertiaryContainer: Color(0xffBFD5E3),
|
|
onTertiaryContainer: Color(0xff06080C),
|
|
error: Color(0xffEF4444),
|
|
onError: Color(0xffffffff),
|
|
errorContainer: Color(0xffFEE2E2),
|
|
onErrorContainer: Color(0xff7F1D1D),
|
|
surface: Color(0xffFAFAFC),
|
|
onSurface: Color(0xff06080C),
|
|
onSurfaceVariant: Color(0xff2D3843), // Enhanced contrast: 7.2:1 (WCAG AAA)
|
|
outline: Color(0xff737A82), // Enhanced contrast: 4.6:1
|
|
outlineVariant: Color(0xffD1D5DB),
|
|
shadow: Color(0x1A000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xff06080C),
|
|
inversePrimary: Color(0xffFF6B7D),
|
|
primaryFixed: Color(0xffFFE0E5),
|
|
onPrimaryFixed: Color(0xff06080C),
|
|
primaryFixedDim: Color(0xffFFC0C9),
|
|
onPrimaryFixedVariant: Color(0xff8B1A2A),
|
|
secondaryFixed: Color(0xffD0DCE8),
|
|
onSecondaryFixed: Color(0xff06080C),
|
|
secondaryFixedDim: Color(0xffB0C4D8),
|
|
onSecondaryFixedVariant: Color(0xff3A4958),
|
|
tertiaryFixed: Color(0xffBFD5E3),
|
|
onTertiaryFixed: Color(0xff06080C),
|
|
tertiaryFixedDim: Color(0xff9FBDCF),
|
|
onTertiaryFixedVariant: Color(0xff1D2C39),
|
|
surfaceDim: Color(0xffdadcde),
|
|
surfaceBright: Color(0xfffafafa),
|
|
surfaceContainerLowest: Color(0xffffffff),
|
|
surfaceContainerLow: Color(0xfff6f6f8),
|
|
surfaceContainer: Color(0xfff1f1f4),
|
|
surfaceContainerHigh: Color(0xffebebee),
|
|
surfaceContainerHighest: Color(0xffe5e5e8),
|
|
);
|
|
}
|
|
|
|
ThemeData light() {
|
|
return theme(lightScheme());
|
|
}
|
|
|
|
static ColorScheme lightMediumContrastScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.light,
|
|
primary: Color(0xff0d3665),
|
|
surfaceTint: Color(0xff3d5f90),
|
|
onPrimary: Color(0xffffffff),
|
|
primaryContainer: Color(0xff4d6ea0),
|
|
onPrimaryContainer: Color(0xffffffff),
|
|
secondary: Color(0xff2d3747),
|
|
onSecondary: Color(0xffffffff),
|
|
secondaryContainer: Color(0xff636d80),
|
|
onSecondaryContainer: Color(0xffffffff),
|
|
tertiary: Color(0xff442e4c),
|
|
onTertiary: Color(0xffffffff),
|
|
tertiaryContainer: Color(0xff7d6485),
|
|
onTertiaryContainer: Color(0xffffffff),
|
|
error: Color(0xff740006),
|
|
onError: Color(0xffffffff),
|
|
errorContainer: Color(0xffcf2c27),
|
|
onErrorContainer: Color(0xffffffff),
|
|
surface: Color(0xfff9f9ff),
|
|
onSurface: Color(0xff0f1116),
|
|
onSurfaceVariant: Color(0xff33363d),
|
|
outline: Color(0xff4f525a),
|
|
outlineVariant: Color(0xff6a6d75),
|
|
shadow: Color(0xff000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xff2e3035),
|
|
inversePrimary: Color(0xffa6c8ff),
|
|
primaryFixed: Color(0xff4d6ea0),
|
|
onPrimaryFixed: Color(0xffffffff),
|
|
primaryFixedDim: Color(0xff335686),
|
|
onPrimaryFixedVariant: Color(0xffffffff),
|
|
secondaryFixed: Color(0xff636d80),
|
|
onSecondaryFixed: Color(0xffffffff),
|
|
secondaryFixedDim: Color(0xff4b5567),
|
|
onSecondaryFixedVariant: Color(0xffffffff),
|
|
tertiaryFixed: Color(0xff7d6485),
|
|
onTertiaryFixed: Color(0xffffffff),
|
|
tertiaryFixedDim: Color(0xff644c6c),
|
|
onTertiaryFixedVariant: Color(0xffffffff),
|
|
surfaceDim: Color(0xffc5c6cd),
|
|
surfaceBright: Color(0xfff9f9ff),
|
|
surfaceContainerLowest: Color(0xffffffff),
|
|
surfaceContainerLow: Color(0xfff3f3fa),
|
|
surfaceContainer: Color(0xffe7e8ee),
|
|
surfaceContainerHigh: Color(0xffdcdce3),
|
|
surfaceContainerHighest: Color(0xffd0d1d8),
|
|
);
|
|
}
|
|
|
|
ThemeData lightMediumContrast() {
|
|
return theme(lightMediumContrastScheme());
|
|
}
|
|
|
|
static ColorScheme lightHighContrastScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.light,
|
|
primary: Color(0xff002c58),
|
|
surfaceTint: Color(0xff3d5f90),
|
|
onPrimary: Color(0xffffffff),
|
|
primaryContainer: Color(0xff264a79),
|
|
onPrimaryContainer: Color(0xffffffff),
|
|
secondary: Color(0xff232d3d),
|
|
onSecondary: Color(0xffffffff),
|
|
secondaryContainer: Color(0xff404a5b),
|
|
onSecondaryContainer: Color(0xffffffff),
|
|
tertiary: Color(0xff392441),
|
|
onTertiary: Color(0xffffffff),
|
|
tertiaryContainer: Color(0xff584160),
|
|
onTertiaryContainer: Color(0xffffffff),
|
|
error: Color(0xff600004),
|
|
onError: Color(0xffffffff),
|
|
errorContainer: Color(0xff98000a),
|
|
onErrorContainer: Color(0xffffffff),
|
|
surface: Color(0xfff9f9ff),
|
|
onSurface: Color(0xff000000),
|
|
onSurfaceVariant: Color(0xff000000),
|
|
outline: Color(0xff292c33),
|
|
outlineVariant: Color(0xff464951),
|
|
shadow: Color(0xff000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xff2e3035),
|
|
inversePrimary: Color(0xffa6c8ff),
|
|
primaryFixed: Color(0xff264a79),
|
|
onPrimaryFixed: Color(0xffffffff),
|
|
primaryFixedDim: Color(0xff063361),
|
|
onPrimaryFixedVariant: Color(0xffffffff),
|
|
secondaryFixed: Color(0xff404a5b),
|
|
onSecondaryFixed: Color(0xffffffff),
|
|
secondaryFixedDim: Color(0xff293343),
|
|
onSecondaryFixedVariant: Color(0xffffffff),
|
|
tertiaryFixed: Color(0xff584160),
|
|
onTertiaryFixed: Color(0xffffffff),
|
|
tertiaryFixedDim: Color(0xff402b48),
|
|
onTertiaryFixedVariant: Color(0xffffffff),
|
|
surfaceDim: Color(0xffb7b8bf),
|
|
surfaceBright: Color(0xfff9f9ff),
|
|
surfaceContainerLowest: Color(0xffffffff),
|
|
surfaceContainerLow: Color(0xfff0f0f7),
|
|
surfaceContainer: Color(0xffe1e2e9),
|
|
surfaceContainerHigh: Color(0xffd3d4da),
|
|
surfaceContainerHighest: Color(0xffc5c6cd),
|
|
);
|
|
}
|
|
|
|
ThemeData lightHighContrast() {
|
|
return theme(lightHighContrastScheme());
|
|
}
|
|
|
|
// Svrnty Brand Colors - Dark Theme
|
|
static ColorScheme darkScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.dark,
|
|
primary: Color(0xffDF2D45), // Svrnty Crimson Red
|
|
surfaceTint: Color(0xff4ADE80), // Success Green tint
|
|
onPrimary: Color(0xffffffff),
|
|
primaryContainer: Color(0xff9C1A29),
|
|
onPrimaryContainer: Color(0xffFFE0E5),
|
|
secondary: Color(0xff506576), // Svrnty Slate Gray
|
|
onSecondary: Color(0xffffffff),
|
|
secondaryContainer: Color(0xff3A4958),
|
|
onSecondaryContainer: Color(0xffD0DCE8),
|
|
tertiary: Color(0xff4ADE80), // Svrnty Success Green - Light
|
|
onTertiary: Color(0xff14532D), // Dark green for contrast
|
|
tertiaryContainer: Color(0xff15803D), // Svrnty Forest Dark Green
|
|
onTertiaryContainer: Color(0xffDCFCE7), // Light green tint
|
|
error: Color(0xffFF6B6B),
|
|
onError: Color(0xff4C0707),
|
|
errorContainer: Color(0xff93000A),
|
|
onErrorContainer: Color(0xffFEE2E2),
|
|
surface: Color(0xff0C1410), // Svrnty Dark Green Background
|
|
onSurface: Color(0xffF0F0F2),
|
|
onSurfaceVariant: Color(0xffBFC3C8),
|
|
outline: Color(0xff9CA3AF), // Enhanced contrast for dark mode
|
|
outlineVariant: Color(0xff374151),
|
|
shadow: Color(0xff000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xffE2E2E6),
|
|
inversePrimary: Color(0xffDF2D45),
|
|
primaryFixed: Color(0xffFFE0E5),
|
|
onPrimaryFixed: Color(0xff3D0009),
|
|
primaryFixedDim: Color(0xffFF6B7D),
|
|
onPrimaryFixedVariant: Color(0xff9C1A29),
|
|
secondaryFixed: Color(0xffD0DCE8),
|
|
onSecondaryFixed: Color(0xff06080C),
|
|
secondaryFixedDim: Color(0xff506576),
|
|
onSecondaryFixedVariant: Color(0xff3A4958),
|
|
tertiaryFixed: Color(0xffDCFCE7), // Light green container
|
|
onTertiaryFixed: Color(0xff14532D), // Dark green text
|
|
tertiaryFixedDim: Color(0xff4ADE80), // Success green
|
|
onTertiaryFixedVariant: Color(0xff15803D), // Forest green
|
|
surfaceDim: Color(0xff0A110E), // Darker forest green
|
|
surfaceBright: Color(0xff1F2D25), // Brighter green tint
|
|
surfaceContainerLowest: Color(0xff070D0A), // Deepest green
|
|
surfaceContainerLow: Color(0xff141B18), // Low green
|
|
surfaceContainer: Color(0xff18221D), // Mid forest green
|
|
surfaceContainerHigh: Color(0xff1D2822), // High green
|
|
surfaceContainerHighest: Color(0xff222F29), // Highest green tint
|
|
);
|
|
}
|
|
|
|
ThemeData dark() {
|
|
return theme(darkScheme());
|
|
}
|
|
|
|
static ColorScheme darkMediumContrastScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.dark,
|
|
primary: Color(0xffcbddff),
|
|
surfaceTint: Color(0xffa6c8ff),
|
|
onPrimary: Color(0xff00264d),
|
|
primaryContainer: Color(0xff7192c6),
|
|
onPrimaryContainer: Color(0xff000000),
|
|
secondary: Color(0xffd3ddf2),
|
|
onSecondary: Color(0xff1c2636),
|
|
secondaryContainer: Color(0xff8791a5),
|
|
onSecondaryContainer: Color(0xff000000),
|
|
tertiary: Color(0xfff1d2f8),
|
|
onTertiary: Color(0xff321e3a),
|
|
tertiaryContainer: Color(0xffa387aa),
|
|
onTertiaryContainer: Color(0xff000000),
|
|
error: Color(0xffffd2cc),
|
|
onError: Color(0xff540003),
|
|
errorContainer: Color(0xffff5449),
|
|
onErrorContainer: Color(0xff000000),
|
|
surface: Color(0xff111318),
|
|
onSurface: Color(0xffffffff),
|
|
onSurfaceVariant: Color(0xffdadce5),
|
|
outline: Color(0xffafb2bb),
|
|
outlineVariant: Color(0xff8d9099),
|
|
shadow: Color(0xff000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xffe1e2e9),
|
|
inversePrimary: Color(0xff254978),
|
|
primaryFixed: Color(0xffd5e3ff),
|
|
onPrimaryFixed: Color(0xff001129),
|
|
primaryFixedDim: Color(0xffa6c8ff),
|
|
onPrimaryFixedVariant: Color(0xff0d3665),
|
|
secondaryFixed: Color(0xffd9e3f8),
|
|
onSecondaryFixed: Color(0xff071120),
|
|
secondaryFixedDim: Color(0xffbdc7dc),
|
|
onSecondaryFixedVariant: Color(0xff2d3747),
|
|
tertiaryFixed: Color(0xfff8d8ff),
|
|
onTertiaryFixed: Color(0xff1c0924),
|
|
tertiaryFixedDim: Color(0xffdbbde2),
|
|
onTertiaryFixedVariant: Color(0xff442e4c),
|
|
surfaceDim: Color(0xff111318),
|
|
surfaceBright: Color(0xff42444a),
|
|
surfaceContainerLowest: Color(0xff05070c),
|
|
surfaceContainerLow: Color(0xff1b1e22),
|
|
surfaceContainer: Color(0xff26282d),
|
|
surfaceContainerHigh: Color(0xff303338),
|
|
surfaceContainerHighest: Color(0xff3b3e43),
|
|
);
|
|
}
|
|
|
|
ThemeData darkMediumContrast() {
|
|
return theme(darkMediumContrastScheme());
|
|
}
|
|
|
|
static ColorScheme darkHighContrastScheme() {
|
|
return const ColorScheme(
|
|
brightness: Brightness.dark,
|
|
primary: Color(0xffeaf0ff),
|
|
surfaceTint: Color(0xffa6c8ff),
|
|
onPrimary: Color(0xff000000),
|
|
primaryContainer: Color(0xffa3c4fb),
|
|
onPrimaryContainer: Color(0xff000b1e),
|
|
secondary: Color(0xffeaf0ff),
|
|
onSecondary: Color(0xff000000),
|
|
secondaryContainer: Color(0xffb9c3d8),
|
|
onSecondaryContainer: Color(0xff030b1a),
|
|
tertiary: Color(0xfffeeaff),
|
|
onTertiary: Color(0xff000000),
|
|
tertiaryContainer: Color(0xffd7b9de),
|
|
onTertiaryContainer: Color(0xff16041e),
|
|
error: Color(0xffffece9),
|
|
onError: Color(0xff000000),
|
|
errorContainer: Color(0xffffaea4),
|
|
onErrorContainer: Color(0xff220001),
|
|
surface: Color(0xff111318),
|
|
onSurface: Color(0xffffffff),
|
|
onSurfaceVariant: Color(0xffffffff),
|
|
outline: Color(0xffedf0f9),
|
|
outlineVariant: Color(0xffc0c2cb),
|
|
shadow: Color(0xff000000),
|
|
scrim: Color(0xff000000),
|
|
inverseSurface: Color(0xffe1e2e9),
|
|
inversePrimary: Color(0xff254978),
|
|
primaryFixed: Color(0xffd5e3ff),
|
|
onPrimaryFixed: Color(0xff000000),
|
|
primaryFixedDim: Color(0xffa6c8ff),
|
|
onPrimaryFixedVariant: Color(0xff001129),
|
|
secondaryFixed: Color(0xffd9e3f8),
|
|
onSecondaryFixed: Color(0xff000000),
|
|
secondaryFixedDim: Color(0xffbdc7dc),
|
|
onSecondaryFixedVariant: Color(0xff071120),
|
|
tertiaryFixed: Color(0xfff8d8ff),
|
|
onTertiaryFixed: Color(0xff000000),
|
|
tertiaryFixedDim: Color(0xffdbbde2),
|
|
onTertiaryFixedVariant: Color(0xff1c0924),
|
|
surfaceDim: Color(0xff111318),
|
|
surfaceBright: Color(0xff4e5055),
|
|
surfaceContainerLowest: Color(0xff000000),
|
|
surfaceContainerLow: Color(0xff1d2024),
|
|
surfaceContainer: Color(0xff2e3035),
|
|
surfaceContainerHigh: Color(0xff393b41),
|
|
surfaceContainerHighest: Color(0xff45474c),
|
|
);
|
|
}
|
|
|
|
ThemeData darkHighContrast() {
|
|
return theme(darkHighContrastScheme());
|
|
}
|
|
|
|
|
|
ThemeData theme(ColorScheme colorScheme) {
|
|
return ThemeData(
|
|
useMaterial3: true,
|
|
brightness: colorScheme.brightness,
|
|
colorScheme: colorScheme,
|
|
fontFamily: 'Montserrat',
|
|
scaffoldBackgroundColor: colorScheme.surface,
|
|
canvasColor: colorScheme.surface,
|
|
textTheme: const TextTheme(
|
|
displayLarge: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 57,
|
|
letterSpacing: -0.5,
|
|
),
|
|
displayMedium: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 45,
|
|
letterSpacing: -0.5,
|
|
),
|
|
displaySmall: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 36,
|
|
letterSpacing: -0.25,
|
|
),
|
|
headlineLarge: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 32,
|
|
letterSpacing: -0.25,
|
|
),
|
|
headlineMedium: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 28,
|
|
letterSpacing: 0,
|
|
),
|
|
headlineSmall: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 24,
|
|
letterSpacing: 0,
|
|
),
|
|
titleLarge: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 22,
|
|
letterSpacing: 0,
|
|
),
|
|
titleMedium: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16,
|
|
letterSpacing: 0.15,
|
|
),
|
|
titleSmall: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 14,
|
|
letterSpacing: 0.1,
|
|
),
|
|
bodyLarge: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 16,
|
|
letterSpacing: 0.5,
|
|
),
|
|
bodyMedium: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 14,
|
|
letterSpacing: 0.25,
|
|
),
|
|
bodySmall: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 12,
|
|
letterSpacing: 0.4,
|
|
),
|
|
labelLarge: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 14,
|
|
letterSpacing: 0.1,
|
|
),
|
|
labelMedium: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 12,
|
|
letterSpacing: 0.5,
|
|
),
|
|
labelSmall: TextStyle(
|
|
fontFamily: 'Montserrat',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 11,
|
|
letterSpacing: 0.5,
|
|
),
|
|
).apply(
|
|
bodyColor: colorScheme.onSurface,
|
|
displayColor: colorScheme.onSurface,
|
|
),
|
|
// Component Themes
|
|
cardTheme: ComponentThemes.cardTheme(colorScheme),
|
|
appBarTheme: ComponentThemes.appBarTheme(colorScheme),
|
|
filledButtonTheme: ComponentThemes.filledButtonTheme(colorScheme),
|
|
elevatedButtonTheme: ComponentThemes.elevatedButtonTheme(colorScheme),
|
|
outlinedButtonTheme: ComponentThemes.outlinedButtonTheme(colorScheme),
|
|
inputDecorationTheme: ComponentThemes.inputDecorationTheme(colorScheme),
|
|
snackBarTheme: ComponentThemes.snackBarTheme(colorScheme),
|
|
dialogTheme: ComponentThemes.dialogTheme(colorScheme),
|
|
bottomNavigationBarTheme:
|
|
ComponentThemes.bottomNavigationBarTheme(colorScheme),
|
|
chipTheme: ComponentThemes.chipTheme(colorScheme),
|
|
progressIndicatorTheme:
|
|
ComponentThemes.progressIndicatorTheme(colorScheme),
|
|
floatingActionButtonTheme:
|
|
ComponentThemes.floatingActionButtonTheme(colorScheme),
|
|
sliderTheme: ComponentThemes.sliderTheme(colorScheme),
|
|
);
|
|
}
|
|
|
|
|
|
List<ExtendedColor> get extendedColors => [
|
|
];
|
|
}
|
|
|
|
class ExtendedColor {
|
|
final Color seed, value;
|
|
final ColorFamily light;
|
|
final ColorFamily lightHighContrast;
|
|
final ColorFamily lightMediumContrast;
|
|
final ColorFamily dark;
|
|
final ColorFamily darkHighContrast;
|
|
final ColorFamily darkMediumContrast;
|
|
|
|
const ExtendedColor({
|
|
required this.seed,
|
|
required this.value,
|
|
required this.light,
|
|
required this.lightHighContrast,
|
|
required this.lightMediumContrast,
|
|
required this.dark,
|
|
required this.darkHighContrast,
|
|
required this.darkMediumContrast,
|
|
});
|
|
}
|
|
|
|
class ColorFamily {
|
|
const ColorFamily({
|
|
required this.color,
|
|
required this.onColor,
|
|
required this.colorContainer,
|
|
required this.onColorContainer,
|
|
});
|
|
|
|
final Color color;
|
|
final Color onColor;
|
|
final Color colorContainer;
|
|
final Color onColorContainer;
|
|
}
|