diff --git a/lib/theme/app_theme.dart b/lib/theme/app_theme.dart index 9747dad7..bd72efe8 100644 --- a/lib/theme/app_theme.dart +++ b/lib/theme/app_theme.dart @@ -60,6 +60,8 @@ class AppTheme { progressIndicatorTheme: _progressIndicatorTheme(scheme), switchTheme: _switchTheme(scheme), chipTheme: _chipTheme(scheme), + popupMenuTheme: _popupMenuTheme(scheme), + tabBarTheme: _tabBarTheme(scheme), dividerTheme: _dividerTheme(scheme), extensions: const >[AppTokens.standard], fontFamily: fontFamily ?? (useSystemFont ? null : 'Google Sans Flex'), @@ -101,6 +103,8 @@ class AppTheme { progressIndicatorTheme: _progressIndicatorTheme(scheme), switchTheme: _switchTheme(scheme), chipTheme: _chipTheme(scheme), + popupMenuTheme: _popupMenuTheme(scheme), + tabBarTheme: _tabBarTheme(scheme), dividerTheme: _dividerTheme(scheme), extensions: const >[AppTokens.standard], fontFamily: fontFamily ?? (useSystemFont ? null : 'Google Sans Flex'), @@ -136,10 +140,11 @@ class AppTheme { ), ); + // Expressive cards use the larger card radius. static CardThemeData _cardTheme(ColorScheme scheme) => CardThemeData( elevation: 0, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(_tokens.radiusControl), + borderRadius: BorderRadius.circular(_tokens.radiusCard), ), color: scheme.surfaceContainerLow, surfaceTintColor: scheme.surfaceTint, @@ -192,8 +197,9 @@ class AppTheme { static InputDecorationTheme _inputDecorationTheme(ColorScheme scheme) => InputDecorationTheme( + // Expressive fields sit on a solid tonal container. filled: true, - fillColor: scheme.surfaceContainerHighest.withValues(alpha: 0.3), + fillColor: scheme.surfaceContainerHigh, border: OutlineInputBorder( borderRadius: BorderRadius.circular(_tokens.radiusControl), borderSide: BorderSide.none, @@ -257,7 +263,7 @@ class AppTheme { SnackBarThemeData( behavior: SnackBarBehavior.floating, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(_tokens.radiusThumb), + borderRadius: BorderRadius.circular(_tokens.radiusControl), ), backgroundColor: scheme.inverseSurface, contentTextStyle: TextStyle(color: scheme.onInverseSurface), @@ -292,6 +298,28 @@ class AppTheme { }), ); + // Expressive menus: a rounded tonal container lifted above the content. + static PopupMenuThemeData _popupMenuTheme(ColorScheme scheme) => + PopupMenuThemeData( + color: scheme.surfaceContainer, + surfaceTintColor: Colors.transparent, + elevation: 3, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(_tokens.radiusControl), + ), + menuPadding: const EdgeInsets.symmetric(vertical: 8), + ); + + // Expressive tabs: a label-width indicator with rounded top corners. + static TabBarThemeData _tabBarTheme(ColorScheme scheme) => TabBarThemeData( + indicatorSize: TabBarIndicatorSize.label, + indicator: UnderlineTabIndicator( + borderRadius: const BorderRadius.vertical(top: Radius.circular(3)), + borderSide: BorderSide(color: scheme.primary, width: 3), + ), + labelStyle: const TextStyle(fontWeight: FontWeight.w600), + ); + static ChipThemeData _chipTheme(ColorScheme scheme) => ChipThemeData( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(_tokens.radiusCard), diff --git a/lib/widgets/app_search_field.dart b/lib/widgets/app_search_field.dart index a0434fcf..0db5365d 100644 --- a/lib/widgets/app_search_field.dart +++ b/lib/widgets/app_search_field.dart @@ -7,7 +7,6 @@ import 'package:spotiflac_android/theme/mornye_theme.dart'; import 'package:spotiflac_android/widgets/app_icon.dart'; import 'package:spotiflac_android/widgets/app_icon_button.dart'; import 'package:spotiflac_android/widgets/mornye_chrome.dart'; -import 'package:spotiflac_android/widgets/settings_group.dart'; /// The standard search field used by top-level app surfaces. /// @@ -80,17 +79,15 @@ class AppSearchField extends StatelessWidget { onClear(); }, )), + // Expressive search bar: an outline-free tonal pill. Focus keeps a + // visible 2dp ring. border: OutlineInputBorder( borderRadius: radius, - borderSide: mornye - ? BorderSide.none - : BorderSide(color: colorScheme.outlineVariant), + borderSide: BorderSide.none, ), enabledBorder: OutlineInputBorder( borderRadius: radius, - borderSide: mornye - ? BorderSide.none - : BorderSide(color: colorScheme.outlineVariant), + borderSide: BorderSide.none, ), focusedBorder: OutlineInputBorder( borderRadius: radius, @@ -99,7 +96,9 @@ class AppSearchField extends StatelessWidget { : BorderSide(color: colorScheme.primary, width: 2), ), filled: true, - fillColor: mornye ? Colors.transparent : settingsGroupColor(context), + fillColor: mornye + ? Colors.transparent + : colorScheme.surfaceContainerHigh, contentPadding: const EdgeInsets.symmetric( horizontal: 20, vertical: 16,