packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart

@@ -47,6 +47,7 @@ class FileSelectionButtonThemeExtensionDefault
       padding: const EdgeInsets.symmetric(horizontal: 10),
       foregroundColors: MultiColor.single(theme.colorScheme.onPrimary),
       backgroundColors: MultiColor.single(theme.colorScheme.primary),
+      animationDuration: Duration.zero,
     );
 
     return FileSelectionButtonThemeExtensionDefault(

packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart

@@ -46,6 +46,7 @@ class FlatButtonThemeExtensionDefault extends FlatButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return FlatButtonThemeExtensionDefault(

packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart

@@ -46,6 +46,7 @@ class SimpleIconButtonThemeExtensionDefault
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SimpleIconButtonThemeExtensionDefault(

packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart

@@ -48,6 +48,7 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SymbolButtonThemeExtensionDefault(

packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart

@@ -31,6 +31,7 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
     this.borderColors,
     this.stroke,
     this.shadow,
+    this.animationDuration,
   });
 
   /// Button radius
@@ -68,9 +69,15 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
   /// Default to `null`
   final BoxShadow? shadow;
 
+  /// Animation duration
+  ///
+  /// Default to `Duration.zero`
+  final Duration? animationDuration;
+
   @override
   String toString() =>
       'ButtonStyle(radius: $radius, padding: $padding, foregroundColors: '
       '$foregroundColors, backgroundColors: $backgroundColors, borderColors: '
-      '$borderColors, stroke: $stroke, shadow: $shadow)';
+      '$borderColors, stroke: $stroke, shadow: $shadow, '
+      'animationDuration: $animationDuration)';
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart

@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -37,6 +38,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,6 +63,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,6 +99,11 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -124,6 +132,7 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       FileSelectionButtonStyle(
         titleStyle: titleStyle ?? this.titleStyle,
@@ -135,5 +144,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart

@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -36,6 +37,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -59,6 +61,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -93,6 +96,11 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -115,6 +123,7 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       FlatButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -125,5 +134,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart

@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -36,6 +37,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -59,6 +61,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -93,6 +96,11 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -115,6 +123,7 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       SimpleIconButtonStyle(
         dimension: dimension ?? this.dimension,
@@ -125,5 +134,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart

@@ -16,6 +16,7 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
@@ -37,6 +38,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
+    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,6 +63,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
+      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,6 +99,11 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
       padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
       stroke: lerpDouble(a.stroke, b.stroke, t),
       shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+      animationDuration: lerpDuration(
+        a.animationDuration ?? Duration.zero,
+        b.animationDuration ?? Duration.zero,
+        t,
+      ),
     );
   }
 
@@ -124,6 +132,7 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
+    Duration? animationDuration,
   }) =>
       SymbolButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -135,5 +144,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
         borderColors: borderColors ?? this.borderColors,
         stroke: stroke ?? this.stroke,
         shadow: shadow ?? this.shadow,
+        animationDuration: animationDuration ?? this.animationDuration,
       );
 }

packages/wyatt_ui_kit/example/lib/buttons/buttons.dart

@@ -49,10 +49,10 @@ class Buttons extends DemoPage {
               SymbolButtons(),
               Gap(20),
               SimpleIconButtons(),
+              Gap(20),
+              FileSelectionButtons()
             ],
           ),
-          const Gap(20),
-          const Align(child: FileSelectionButtons()),
         ],
       );
 }

packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart

@@ -0,0 +1,68 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+
+/// {@template animated_decorated_box}
+/// A wrapper for [DecoratedBox] that animates the decoration when it changes.
+/// {@endtemplate}
+class AnimatedDecoratedBox extends ImplicitlyAnimatedWidget {
+  /// {@macro animated_decorated_box}
+  const AnimatedDecoratedBox({
+    required super.duration,
+    this.decoration,
+    this.child,
+    super.key,
+  });
+
+  /// The decoration to paint behind the [child].
+  ///
+  /// A shorthand for specifying just a solid color is available in the
+  /// constructor: set the `color` argument instead of the `decoration`
+  /// argument.
+  final Decoration? decoration;
+
+  /// The [child] contained by the box.
+  final Widget? child;
+
+  @override
+  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() =>
+      _AnimatedDecoratedBoxState();
+}
+
+class _AnimatedDecoratedBoxState
+    extends AnimatedWidgetBaseState<AnimatedDecoratedBox> {
+  DecorationTween? _decoration;
+  @override
+  Widget build(BuildContext context) {
+    final Animation<double> animation = this.animation;
+    return DecoratedBox(
+      decoration: _decoration?.evaluate(animation) ??
+          widget.decoration ??
+          const BoxDecoration(),
+      child: widget.child,
+    );
+  }
+
+  @override
+  void forEachTween(TweenVisitor<dynamic> visitor) {
+    _decoration = visitor(
+      _decoration,
+      widget.decoration,
+      (dynamic value) => DecorationTween(begin: value as Decoration),
+    ) as DecorationTween?;
+  }
+}

packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart

@@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/flat_button/flat_button_theme_resolver.dart';
@@ -130,24 +131,15 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             onPressed?.call(state.state);
             bloc(context).onClickUpOut();
           },
-          child: AnimatedContainer(
-            // TODO(wyatt): make it configurable, and generalize it
-            duration: const Duration(milliseconds: 150),
-            curve: Curves.easeOut,
+          child: AnimatedDecoratedBox(
+            duration: style.animationDuration ?? Duration.zero,
             decoration: BoxDecoration(
-              color: style.backgroundColors?.color,
-
-              // if no gradient colors => no default value
               gradient: (style.backgroundColors?.isGradient ?? false)
                   ? LinearGradient(
                       colors: style.backgroundColors!.colors,
                     )
                   : null,
-
-              borderRadius: style.radius,
-            ),
-            child: DecoratedBox(
-              decoration: BoxDecoration(
+              color: style.backgroundColors?.color,
               // If no border color => no default value
               border: (style.borderColors != null && style.stroke != null)
                   ? (style.borderColors?.isGradient ?? false)
@@ -248,7 +240,6 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
           ),
         ),
       ),
-      ),
     );
   }
 }

packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart

@@ -18,6 +18,7 @@ import 'package:flutter/material.dart' hide ButtonStyle;
 import 'package:flutter/services.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/simple_icon_button/simple_icon_button_theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
@@ -126,7 +127,8 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             dimension: style.dimension,
             child: AspectRatio(
               aspectRatio: 1,
-              child: DecoratedBox(
+              child: AnimatedDecoratedBox(
+                duration: style.animationDuration ?? Duration.zero,
                 decoration: BoxDecoration(
                   color: style.backgroundColors?.color,
                   // If no border color => no default value

packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart

@@ -19,6 +19,7 @@ import 'package:flutter/services.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/animated_decorated_box.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/selectable_button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/state_listener.dart';
@@ -154,7 +155,8 @@ class SymbolButtonScreen
                 dimension: style.dimension,
                 child: AspectRatio(
                   aspectRatio: 1,
-                  child: DecoratedBox(
+                  child: AnimatedDecoratedBox(
+                    duration: style.animationDuration ?? Duration.zero,
                     decoration: BoxDecoration(
                       color: style.backgroundColors?.color,
                       // If no border color => no default value

packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart

@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class FileSelectionButtonThemeExtensionImpl
     extends FileSelectionButtonThemeExtension {
@@ -36,50 +37,39 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFFDDE0E3),
-        Color(0xFFCACCD4),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.black),
+      backgroundColors: const MultiColor.single(WyattColors.light),
+      borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        foregroundColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.lightGradient,
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+            MultiColor.single(WyattColors.black.withOpacity(0.04)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        backgroundColors: MultiColor.single(WyattColors.black.withOpacity(0.1)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
+        borderColors: WyattColors.redGradient,
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.black),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }
@@ -91,50 +81,40 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF24262A),
-        Color(0xFF24262A),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(WyattColors.black),
+      borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         foregroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        backgroundColors: const MultiColor.single(WyattColors.black),
+        borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+        backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.1)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
+        borderColors: WyattColors.redGradient,
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }

packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart

@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
   const FlatButtonThemeExtensionImpl({
@@ -32,54 +33,42 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
+      foregroundColors: WyattColors.blueBtnGradient,
+      backgroundColors: const MultiColor.single(WyattColors.light),
+      borderColors: WyattColors.blueBtnGradient,
       stroke: 3,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FlatButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF3C97FB).withOpacity(0.4),
+          color: WyattColors.blue1.withOpacity(0.4),
         ),
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        foregroundColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
+          color: WyattColors.light,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.blueBtnHoverGradient,
+        borderColors: WyattColors.blueBtnHoverGradient,
+      ),
+      focusedStyle: style.copyWith(
+        stroke: 5,
+        borderColors: WyattColors.blueBtnFocusGradient,
       ),
-      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
+          color: WyattColors.light,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.darkBlueGradient,
+        borderColors: WyattColors.darkBlueGradient,
       ),
     );
   }
@@ -90,43 +79,37 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(WyattColors.black),
+      borderColors: WyattColors.blueBtnGradient,
       stroke: 3,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FlatButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF60656A),
+          color: WyattColors.gray1,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        backgroundColors:
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        borderColors: WyattColors.grayGradient,
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.blueBtnHoverGradient,
+        borderColors: WyattColors.blueBtnHoverGradient,
+      ),
+      focusedStyle: style.copyWith(
+        stroke: 5,
+        borderColors: WyattColors.blueBtnFocusGradient,
       ),
-      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        backgroundColors: WyattColors.darkBlueGradient,
+        borderColors: WyattColors.darkBlueGradient,
       ),
     );
   }

packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart

@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class SimpleIconButtonThemeExtensionImpl
     extends SimpleIconButtonThemeExtension {
@@ -31,47 +32,24 @@ class SimpleIconButtonThemeExtensionImpl
     theme ??= ThemeData.light();
     final style = SimpleIconButtonStyle(
       dimension: 30,
-      radius: BorderRadius.circular(15),
-      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      radius: BorderRadius.circular(5),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
+      animationDuration: const Duration(milliseconds: 150),
     );
+
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray2.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
       ),
     );
   }
@@ -79,42 +57,24 @@ class SimpleIconButtonThemeExtensionImpl
   factory SimpleIconButtonThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
     final style = SimpleIconButtonStyle(
-      radius: BorderRadius.circular(15),
-      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      dimension: 30,
+      radius: const BorderRadius.all(Radius.circular(5)),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
       ),
     );
   }

packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart

@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
   const SymbolButtonThemeExtensionImpl({
@@ -31,63 +32,38 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.light();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      radius: BorderRadius.circular(15),
+      dimension: 60,
+      radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      borderColors: const MultiColor.single(WyattColors.gray2),
+      stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF3C97FB).withOpacity(0.4),
+          color: WyattColors.gray1,
         ),
-        foregroundColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        stroke: 1,
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
-      ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFFDDE0E3),
-        ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(WyattColors.gray2),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }
@@ -96,52 +72,41 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.dark();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      radius: BorderRadius.circular(15),
+      dimension: 60,
+      radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
+      foregroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      borderColors: const MultiColor.single(WyattColors.gray1),
+      stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF60656A),
+          color: WyattColors.gray1,
         ),
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        stroke: 1,
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
+        backgroundColors:
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: const MultiColor([
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          fontSize: 14,
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }