Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 52 additions & 19 deletions lib/core/app_theme.dart
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,10 @@ class AppColors extends ThemeExtension<AppColors> {
final Color messageSent;
final Color messageReceived;
final Color systemMessage;

/// Dark-gold color used for the notification count badge.
final Color badgeGold;

/// Amber used for time-sensitive warnings (running timers, backup nags).
final Color warningAmber;

Expand Down Expand Up @@ -146,7 +148,11 @@ class AppColors extends ThemeExtension<AppColors> {
// ── Order Book redesign palette ───────────────────────────────────────────────

/// Palette of the "Mostro UX Redesign" mock (Claude Design, screen
/// #3 · Order book). Applied only to the redesigned Order Book screen while
/// #3 · Order book), with the night-contrast refresh ("Card Contrast
/// Options" mock, option 06 combined + 07's selective glow): darker page
/// background, lighter cards, a 9% hairline on every card, and a green glow
/// reserved for the one card per screen that is selected / needs action.
/// Applied only to the redesigned Order Book screen while
/// the rest of the app migrates screen by screen; dark values follow the mock
/// except where the mock fails WCAG AA (4.5:1) on its real rendered surface —
/// [textTertiary] and [red] are lightened just enough to pass. The mock is
Expand All @@ -172,6 +178,8 @@ class OrderBookPalette {
required this.blueFill,
required this.amber,
required this.red,
required this.glowBorder,
required this.glowRing,
});

final Color bg;
Expand All @@ -195,15 +203,24 @@ class OrderBookPalette {
final Color amber;
final Color red;

/// Border of the one selected / action-required card per screen
/// (mock: `rgba(143,224,74,0.55)`). Pair with [glowRing]; every other
/// card keeps the plain [border] hairline — if all cards glow, none does.
final Color glowBorder;

/// Soft green halo behind the selected card
/// (mock: `0 0 0 1px rgba(143,224,74,0.25), 0 0 22px rgba(143,224,74,0.18)`).
final List<BoxShadow> glowRing;

static const dark = OrderBookPalette(
bg: Color(0xFF0F151C),
bgCard: Color(0xFF1A2029),
bgElevated: Color(0xFF222A35),
border: Color(0x0FFFFFFF), // rgba(255,255,255,0.06)
bg: Color(0xFF080B0F),
bgCard: Color(0xFF232C38),
bgElevated: Color(0xFF2C3644),
border: Color(0x17FFFFFF), // rgba(255,255,255,0.09)
textPrimary: Color(0xFFF2F4F7),
textSecondary: Color(0xFFA8B0BC),
// Mock #6B7280 is 3.4:1 on the card — lightened to pass AA (4.8:1).
textTertiary: Color(0xFF848C9A),
// Mock #6B7280 is 3.5:1 on the card — lightened to pass AA (4.6:1).
textTertiary: Color(0xFF8B93A1),
tabInactive: Color(0xFF4A5060),
green: Color(0xFF8FE04A),
greenDim: Color(0xFF2A4015),
Expand All @@ -212,8 +229,19 @@ class OrderBookPalette {
blue: Color(0xFF7BB4F0),
blueFill: Color(0xFF1E2B42),
amber: Color(0xFFE89C3C),
// Mock #E5484D is 3.7:1 on its 13% pill fill — lightened to pass AA.
red: Color(0xFFF27D81),
// Mock #E5484D is 3.8:1 on its 13% pill fill — lightened to pass AA.
red: Color(0xFFF48489),
glowBorder: Color(0x8C8FE04A), // rgba(143,224,74,0.55)
glowRing: [
BoxShadow(
color: Color(0x408FE04A), // rgba(143,224,74,0.25)
spreadRadius: 1,
),
BoxShadow(
color: Color(0x2E8FE04A), // rgba(143,224,74,0.18)
blurRadius: 22,
),
],
);

static const light = OrderBookPalette(
Expand All @@ -233,6 +261,12 @@ class OrderBookPalette {
blueFill: Color(0x2635638F),
amber: Color(0xFF845010),
red: Color(0xFFAE3333),
// Same alphas as dark over the light theme's AA-safe green.
glowBorder: Color(0x8C426800),
glowRing: [
BoxShadow(color: Color(0x40426800), spreadRadius: 1),
BoxShadow(color: Color(0x2E426800), blurRadius: 22),
],
);

static OrderBookPalette of(BuildContext context) =>
Expand Down Expand Up @@ -325,16 +359,16 @@ const _light = AppColors(
// ── ThemeData factories ────────────────────────────────────────────────────────

ThemeData buildDarkTheme() => _buildTheme(
brightness: Brightness.dark,
colors: _dark,
scaffold: const Color(0xFF1B1E28),
);
brightness: Brightness.dark,
colors: _dark,
scaffold: const Color(0xFF1B1E28),
);

ThemeData buildLightTheme() => _buildTheme(
brightness: Brightness.light,
colors: _light,
scaffold: const Color(0xFFFFFFFF),
);
brightness: Brightness.light,
colors: _light,
scaffold: const Color(0xFFFFFFFF),
);

ThemeData _buildTheme({
required Brightness brightness,
Expand Down Expand Up @@ -467,6 +501,5 @@ class _NoTransitionBuilder extends PageTransitionsBuilder {
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>
child;
) => child;
}
Loading
Loading