diff --git a/lib/src/theme.dart b/lib/src/theme.dart index 1bfdbc2..5127949 100644 --- a/lib/src/theme.dart +++ b/lib/src/theme.dart @@ -11,70 +11,92 @@ typedef ThemePair = ({ThemeData lightTheme, ThemeData darkTheme}); const _lightBase = Colors.white; final _darkBase = Colors.black.scale(lightness: 0.09); final _darkMenuBase = Colors.black.scale(lightness: 0.07); -const kContainerRadius = 10.0; -const kButtonRadius = 6.0; -const kMenuRadius = 8.0; +const _kContainerRadius = 10.0; +final _kButtonHeight = isDesktop ? 42.0 : 48.0; +final _kButtonRadius = _kButtonHeight / 2; +const _kMenuRadius = 8.0; +const _kInputDecorationRadius = 6.0; ThemePair phoenixTheme({ required Color color, + double? buttonRadius, + double? buttonHeight, }) { final darkScheme = _darkScheme(color); final lightScheme = _lightScheme(color); return ( - lightTheme: ThemeData( + lightTheme: _phoenixTheme( colorScheme: lightScheme, - scaffoldBackgroundColor: lightScheme.surface, - splashFactory: NoSplash.splashFactory, - dividerColor: _dividerColor(lightScheme), - cardColor: _cardColor(lightScheme), - menuTheme: _menuTheme(lightScheme), - popupMenuTheme: _popupMenuTheme(lightScheme), - dialogTheme: _dialogTheme(lightScheme), - dialogBackgroundColor: _menuBg(lightScheme), - dropdownMenuTheme: _dropdownMenuTheme(lightScheme), - sliderTheme: _sliderTheme(lightScheme), - dividerTheme: _dividerTheme(lightScheme), - progressIndicatorTheme: _progressIndicatorTheme(lightScheme), - switchTheme: _switchTheme(lightScheme), - checkboxTheme: _checkBoxTheme(lightScheme), - floatingActionButtonTheme: _floatingActionButtonTheme(lightScheme), - elevatedButtonTheme: _elevatedButtonTheme(lightScheme), - navigationRailTheme: _naviRailTheme(lightScheme), - navigationBarTheme: _naviBarTheme(lightScheme), - appBarTheme: _appBarTheme(lightScheme), - snackBarTheme: _snackBarThemeData(lightScheme), - cardTheme: _cardTheme(lightScheme), - drawerTheme: _drawerTheme(lightScheme), + buttonHeight: buttonHeight, + buttonRadius: buttonRadius, ), - darkTheme: ThemeData( + darkTheme: _phoenixTheme( colorScheme: darkScheme, - scaffoldBackgroundColor: darkScheme.surface, - splashFactory: NoSplash.splashFactory, - dividerColor: _dividerColor(darkScheme), - cardColor: _cardColor(darkScheme), - menuTheme: _menuTheme(darkScheme), - popupMenuTheme: _popupMenuTheme(darkScheme), - dialogTheme: _dialogTheme(darkScheme), - dialogBackgroundColor: _menuBg(darkScheme), - dropdownMenuTheme: _dropdownMenuTheme(darkScheme), - sliderTheme: _sliderTheme(darkScheme), - dividerTheme: _dividerTheme(darkScheme), - progressIndicatorTheme: _progressIndicatorTheme(darkScheme), - switchTheme: _switchTheme(darkScheme), - checkboxTheme: _checkBoxTheme(darkScheme), - floatingActionButtonTheme: _floatingActionButtonTheme(darkScheme), - elevatedButtonTheme: _elevatedButtonTheme(darkScheme), - navigationRailTheme: _naviRailTheme(darkScheme), - navigationBarTheme: _naviBarTheme(darkScheme), - appBarTheme: _appBarTheme(darkScheme), - snackBarTheme: _snackBarThemeData(darkScheme), - cardTheme: _cardTheme(darkScheme), - drawerTheme: _drawerTheme(darkScheme), + buttonHeight: buttonHeight, + buttonRadius: buttonRadius, ) ); } +ThemeData _phoenixTheme({ + required ColorScheme colorScheme, + double? buttonRadius, + double? buttonHeight, +}) { + final buttonShape = RoundedRectangleBorder( + borderRadius: BorderRadius.circular(buttonRadius ?? _kButtonRadius), + ); + + final buttonSize = Size(1, buttonHeight ?? _kButtonHeight); + + return ThemeData( + colorScheme: colorScheme, + scaffoldBackgroundColor: colorScheme.surface, + splashFactory: NoSplash.splashFactory, + dividerColor: _dividerColor(colorScheme), + cardColor: _cardColor(colorScheme), + menuTheme: _menuTheme(colorScheme), + popupMenuTheme: _popupMenuTheme(colorScheme), + dialogTheme: _dialogTheme(colorScheme), + dialogBackgroundColor: _menuBg(colorScheme), + dropdownMenuTheme: _dropdownMenuTheme(colorScheme), + sliderTheme: _sliderTheme(colorScheme), + dividerTheme: _dividerTheme(colorScheme), + progressIndicatorTheme: _progressIndicatorTheme(colorScheme), + switchTheme: _switchTheme(colorScheme), + checkboxTheme: _checkBoxTheme(colorScheme), + floatingActionButtonTheme: _floatingActionButtonTheme(colorScheme), + elevatedButtonTheme: _elevatedButtonTheme( + colorScheme: colorScheme, + buttonShape: buttonShape, + buttonSize: buttonSize, + ), + outlinedButtonTheme: _outlinedButtonThemeData( + colorScheme: colorScheme, + buttonShape: buttonShape, + buttonSize: buttonSize, + ), + filledButtonTheme: _filledButtonThemeData( + colorScheme: colorScheme, + buttonShape: buttonShape, + buttonSize: buttonSize, + ), + textButtonTheme: _textButtonThemeData( + colorScheme: colorScheme, + buttonShape: buttonShape, + buttonSize: buttonSize, + ), + navigationRailTheme: _naviRailTheme(colorScheme), + navigationBarTheme: _naviBarTheme(colorScheme), + appBarTheme: _appBarTheme(colorScheme), + snackBarTheme: _snackBarThemeData(colorScheme), + cardTheme: _cardTheme(colorScheme), + drawerTheme: _drawerTheme(colorScheme), + inputDecorationTheme: _inputDecorationTheme(colorScheme), + ); +} + ColorScheme _darkScheme(Color color) { return ColorScheme.fromSeed( seedColor: color, @@ -113,7 +135,7 @@ DialogTheme _dialogTheme(ColorScheme colorScheme) { backgroundColor: bgColor, surfaceTintColor: bgColor, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(kContainerRadius), + borderRadius: BorderRadius.circular(_kContainerRadius), side: colorScheme.isLight ? BorderSide.none : BorderSide( @@ -141,7 +163,7 @@ PopupMenuThemeData _popupMenuTheme(ColorScheme colorScheme) { color: bgColor, surfaceTintColor: bgColor, shape: OutlineInputBorder( - borderRadius: BorderRadius.circular(kContainerRadius), + borderRadius: BorderRadius.circular(_kContainerRadius), borderSide: BorderSide( color: colorScheme.onSurface.withOpacity( colorScheme.isLight ? 0.3 : 0.2, @@ -165,7 +187,7 @@ MenuStyle _menuStyle(ColorScheme colorScheme) { ), width: 1, ), - borderRadius: BorderRadius.circular(kMenuRadius), + borderRadius: BorderRadius.circular(_kMenuRadius), ), ), side: WidgetStateBorderSide.resolveWith( @@ -208,6 +230,42 @@ SliderThemeData _sliderTheme(ColorScheme colorScheme) { ); } +InputDecorationTheme _inputDecorationTheme(ColorScheme colorScheme) { + return InputDecorationTheme( + isDense: isDesktop ? true : false, + filled: true, + fillColor: colorScheme.surface + .scale(lightness: colorScheme.isLight ? -0.07 : 0.03), + border: _inputBorder(colorScheme: colorScheme), + enabledBorder: _inputBorder( + colorScheme: colorScheme, + ), + focusedBorder: _inputBorder( + colorScheme: colorScheme, + state: WidgetState.focused, + ), + ); +} + +OutlineInputBorder _inputBorder({ + required ColorScheme colorScheme, + WidgetState? state, +}) { + return OutlineInputBorder( + borderSide: BorderSide( + width: 1, + color: switch (state) { + WidgetState.focused => colorScheme.primary, + WidgetState.hovered => colorScheme.primary, + _ => + colorScheme.outline.scale(lightness: colorScheme.isLight ? 0 : 0.1), + }, + ), + borderRadius: + const BorderRadius.all(Radius.circular(_kInputDecorationRadius)), + ); +} + class CustomTrackShape extends RoundedRectSliderTrackShape { @override void paint( @@ -308,21 +366,64 @@ FloatingActionButtonThemeData _floatingActionButtonTheme( ); } -ElevatedButtonThemeData _elevatedButtonTheme(ColorScheme colorScheme) { +ElevatedButtonThemeData _elevatedButtonTheme({ + required ColorScheme colorScheme, + required Size buttonSize, + required RoundedRectangleBorder buttonShape, +}) { return ElevatedButtonThemeData( style: ElevatedButton.styleFrom( - backgroundColor: colorScheme.isLight - ? colorScheme.primaryFixed - : colorScheme.primaryContainer, - elevation: 0, - shadowColor: Colors.transparent, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(30), + shape: buttonShape, + backgroundColor: colorScheme.primary, + foregroundColor: colorScheme.primary.contrastColor, + minimumSize: buttonSize, + ), + ); +} + +OutlinedButtonThemeData _outlinedButtonThemeData({ + required ColorScheme colorScheme, + required Size buttonSize, + required RoundedRectangleBorder buttonShape, +}) { + return OutlinedButtonThemeData( + style: OutlinedButton.styleFrom( + shape: buttonShape, + minimumSize: buttonSize, + backgroundColor: colorScheme.primary.withOpacity(0.03), + side: BorderSide( + color: colorScheme.primary.withOpacity(0.4), ), ), ); } +FilledButtonThemeData _filledButtonThemeData({ + required ColorScheme colorScheme, + required Size buttonSize, + required RoundedRectangleBorder buttonShape, +}) { + return FilledButtonThemeData( + style: FilledButton.styleFrom( + shape: buttonShape, + minimumSize: buttonSize, + ), + ); +} + +TextButtonThemeData _textButtonThemeData({ + required ColorScheme colorScheme, + required Size buttonSize, + required RoundedRectangleBorder buttonShape, +}) { + return TextButtonThemeData( + style: TextButton.styleFrom( + shape: buttonShape, + minimumSize: buttonSize, + ), + ); +} + NavigationRailThemeData _naviRailTheme(ColorScheme colorScheme) { return NavigationRailThemeData( indicatorColor: _indicatorColor(colorScheme), @@ -350,8 +451,8 @@ DrawerThemeData _drawerTheme(ColorScheme colorScheme) { return DrawerThemeData( shape: RoundedRectangleBorder( borderRadius: const BorderRadiusDirectional.only( - topEnd: Radius.circular(kContainerRadius), - bottomEnd: Radius.circular(kContainerRadius), + topEnd: Radius.circular(_kContainerRadius), + bottomEnd: Radius.circular(_kContainerRadius), ), side: colorScheme.isLight ? BorderSide.none @@ -375,3 +476,6 @@ SnackBarThemeData _snackBarThemeData(ColorScheme colorScheme) { bool get isMobile => !kIsWeb && Platform.isAndroid || Platform.isIOS || Platform.isFuchsia; + +bool get isDesktop => + !kIsWeb && (Platform.isLinux || Platform.isMacOS || Platform.isWindows);