feat(ui): update default extension implementation

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(
@@ -54,11 +55,11 @@ class FileSelectionButtonThemeExtensionDefault
       focusedStyle: style,
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.80)),
       ),
       tappedStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.75)),
       ),
       selectedStyle: style,
       disabledStyle: style.copyWith(

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

@@ -43,9 +43,10 @@ class SimpleIconButtonThemeExtensionDefault
       radius: (theme.buttonTheme.shape is RoundedRectangleBorder)
           ? (theme.buttonTheme.shape as RoundedRectangleBorder).borderRadius
           : null,
-      padding: theme.buttonTheme.padding,
+      padding: const EdgeInsets.all(5),
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SimpleIconButtonThemeExtensionDefault(
@@ -53,11 +54,11 @@ class SimpleIconButtonThemeExtensionDefault
       focusedStyle: style,
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.80)),
       ),
       tappedStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.75)),
       ),
       disabledStyle: style.copyWith(
         foregroundColors:

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

@@ -37,10 +37,11 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
   factory SymbolButtonThemeExtensionDefault.from(ThemeData theme) {
     final backgroundColor = MultiColor.single(theme.colorScheme.primary);
     final foregroundColor = MultiColor.single(theme.colorScheme.onPrimary);
+    final textColor = MultiColor.single(theme.textTheme.bodyMedium?.color);
 
     final style = SymbolButtonStyle(
       labelStyle:
-          theme.textTheme.labelLarge?.copyWith(color: foregroundColor.color),
+          theme.textTheme.labelLarge?.copyWith(color: textColor.color),
       dimension: theme.buttonTheme.height * 1.5,
       radius: (theme.buttonTheme.shape is RoundedRectangleBorder)
           ? (theme.buttonTheme.shape as RoundedRectangleBorder).borderRadius
@@ -48,6 +49,7 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
+      animationDuration: Duration.zero,
     );
 
     return SymbolButtonThemeExtensionDefault(
@@ -55,11 +57,11 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       focusedStyle: style,
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.80)),
       ),
       tappedStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.75)),
       ),
       disabledStyle: style.copyWith(
         foregroundColors:
@@ -70,6 +72,8 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       selectedStyle: style.copyWith(
         backgroundColors:
             MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
+        borderColors: textColor,
+        stroke: 3,
       ),
     );
   }

packages/wyatt_ui_components/lib/src/data/theme_extensions/card_theme_extension_default.dart

@@ -45,15 +45,15 @@ class CardThemeExtensionDefault extends CardThemeExtension {
   factory CardThemeExtensionDefault.from(ThemeData theme) =>
       CardThemeExtensionDefault(
         radius: const BorderRadius.all(Radius.circular(12)),
-        padding: theme.cardTheme.margin ?? const EdgeInsets.all(4),
+        padding: theme.cardTheme.margin ?? const EdgeInsets.all(15),
-        backgroundColors: MultiColor.single(theme.cardTheme.color),
+        backgroundColors: MultiColor.single(theme.cardColor),
-        borderColors: MultiColor.single(theme.cardTheme.color),
+        borderColors: MultiColor.single(theme.canvasColor),
         minSize: const Size(330, 0),
         maxSize: const Size(390, double.infinity),
         titleStyle: theme.textTheme.titleLarge,
         subtitleStyle: theme.textTheme.titleMedium,
         bodyStyle: theme.textTheme.bodyMedium,
-        stroke: 1,
+        stroke: 0,
         shadow: null,
       );
 

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/example/lib/rich_text_builders/rich_text_builders.dart

@@ -26,38 +26,40 @@ class RichTextBuilders extends DemoPage {
   String get title => 'RichTextBuilders';
 
   @override
-  Widget build(BuildContext context) => ListView(
+  Widget build(BuildContext context) => SelectionArea(
-        cacheExtent: 1000,
+    child: ListView(
-        children: [
+          cacheExtent: 1000,
-          const Gap(20),
+          children: [
-          Align(
+            const Gap(20),
-            child: Text(
+            Align(
-              title,
+              child: Text(
-              style: Theme.of(context).textTheme.titleLarge,
+                title,
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
             ),
-          ),
+            const Gap(20),
-          const Gap(20),
+            const Padding(
-          const Padding(
+              padding: EdgeInsets.all(8),
-            padding: EdgeInsets.all(8),
+              child: RichTextBuilder(
-            child: RichTextBuilder(
+                text: '''
-              text: '''
+  Innovation, Expertise et Accompagnement...
-Innovation, Expertise et Accompagnement...
+  Notre agence de développement Wyatt Studio met tout en oeuvre pour vous aider à <gradient-blue>concrétiser vos idées</gradient-blue> de solutions informatiques et mobiles.
-Notre agence de développement Wyatt Studio met tout en oeuvre pour vous aider à <gradient-blue>concrétiser vos idées</gradient-blue> de solutions informatiques et mobiles.
+  
-
+  Vous aussi, comme beaucoup d’autres <gradient-blue>agences ou startups</gradient-blue>, faites nous confiance pour la réalisation de votre projet dès maintenant !
-Vous aussi, comme beaucoup d’autres <gradient-blue>agences ou startups</gradient-blue>, faites nous confiance pour la réalisation de votre projet dès maintenant !
+              ''',
-            ''',
+              ),
             ),
-          ),
+            const Gap(20),
-          const Gap(20),
+            const Padding(
-          const Padding(
+              padding: EdgeInsets.all(8),
-            padding: EdgeInsets.all(8),
+              child: RichTextBuilder(
-            child: RichTextBuilder(
+                text: '''
-              text: '''
+  Je peux être <blue>bleu</blue>, ou même <gradient-red>rouge en dégradé</gradient-red>. À vrai dire <green>je peux</green> être <gradient-blue>un peu</gradient-blue> n'importe quelle couleur.
-Je peux être <blue>bleu</blue>, ou même <gradient-red>rouge en dégradé</gradient-red>. À vrai dire <green>je peux</green> être <gradient-blue>un peu</gradient-blue> n'importe quelle couleur.
+              ''',
-            ''',
+              ),
             ),
-          ),
+            const Gap(20),
-          const Gap(20),
+          ],
-        ],
+        ),
-      );
+  );
 }

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,119 +131,109 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             onPressed?.call(state.state);
             bloc(context).onClickUpOut();
           },
-          child: AnimatedContainer(
+          child: AnimatedDecoratedBox(
-            // TODO(wyatt): make it configurable, and generalize it
+            duration: style.animationDuration ?? Duration.zero,
-            duration: const Duration(milliseconds: 150),
-            curve: Curves.easeOut,
             decoration: BoxDecoration(
-              color: style.backgroundColors?.color,
-
-              // if no gradient colors => no default value
               gradient: (style.backgroundColors?.isGradient ?? false)
                   ? LinearGradient(
                       colors: style.backgroundColors!.colors,
                     )
                   : null,
+              color: style.backgroundColors?.color,
+              // If no border color => no default value
+              border: (style.borderColors != null && style.stroke != null)
+                  ? (style.borderColors?.isGradient ?? false)
+                      ? GradientBoxBorder(
+                          gradient: LinearGradient(
+                            colors: style.borderColors!.colors,
+                          ),
+                          width: style.stroke!,
+                        )
+                      : Border.all(
+                          color: style.borderColors!.color,
+                          width: style.stroke!,
+                        )
+                  : null,
 
+              boxShadow: [
+                if (style.shadow != null) ...[style.shadow!]
+              ],
               borderRadius: style.radius,
             ),
-            child: DecoratedBox(
+            child: ConstrainedBox(
-              decoration: BoxDecoration(
+              constraints: const BoxConstraints(
-                // If no border color => no default value
+                minWidth: 88,
-                border: (style.borderColors != null && style.stroke != null)
+                minHeight: 36,
-                    ? (style.borderColors?.isGradient ?? false)
+              ), // min sizes for Material buttons
-                        ? GradientBoxBorder(
+              child: Padding(
-                            gradient: LinearGradient(
+                padding: style.padding ?? EdgeInsets.zero,
-                              colors: style.borderColors!.colors,
+                child: Row(
-                            ),
+                  mainAxisSize: mainAxisSize ?? MainAxisSize.min,
-                            width: style.stroke!,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                          )
+                  children: [
-                        : Border.all(
+                    if (prefix != null &&
-                            color: style.borderColors!.color,
+                        (prefix is Icon?) &&
-                            width: style.stroke!,
+                        ((prefix as Icon?)?.color != null)) ...[
-                          )
+                      prefix!
-                    : null,
+                    ] else if (style.foregroundColors?.color != null &&
-
+                        prefix != null) ...[
-                boxShadow: [
+                      ColorFiltered(
-                  if (style.shadow != null) ...[style.shadow!]
+                        colorFilter: ColorFilter.mode(
-                ],
+                          style.foregroundColors!.color,
-                borderRadius: style.radius,
+                          BlendMode.srcIn,
-              ),
+                        ),
-              child: ConstrainedBox(
+                        child: prefix,
-                constraints: const BoxConstraints(
+                      )
-                  minWidth: 88,
+                    ] else ...[
-                  minHeight: 36,
+                      prefix ?? const SizedBox.shrink()
-                ), // min sizes for Material buttons
-                child: Padding(
-                  padding: style.padding ?? EdgeInsets.zero,
-                  child: Row(
-                    mainAxisSize: mainAxisSize ?? MainAxisSize.min,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      if (prefix != null &&
-                          (prefix is Icon?) &&
-                          ((prefix as Icon?)?.color != null)) ...[
-                        prefix!
-                      ] else if (style.foregroundColors?.color != null &&
-                          prefix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.color,
-                            BlendMode.srcIn,
-                          ),
-                          child: prefix,
-                        )
-                      ] else ...[
-                        prefix ?? const SizedBox.shrink()
-                      ],
-                      Gap(style.padding?.vertical ?? 10),
-
-                      /// Choose color
-                      ///  buttonStyle.label.style.color ??
-                      ///    context.textTheme.labelLarge.color
-                      ///
-                      /// Choose gradient
-                      /// label.gradient ??
-                      ///  buttonStyle.foregroundColor.colors ??
-                      ///    null
-                      ///
-                      /// More infos in ThemeResolver class
-                      if (label != null) ...[
-                        GradientText.fromWrapper(
-                          label!,
-                          style: style.labelStyle,
-                          gradientColors: style.foregroundColors,
-                        )
-                      ],
-                      Gap(style.padding?.vertical ?? 10),
-                      if (suffix != null &&
-                          (suffix is Icon?) &&
-                          ((suffix as Icon?)?.color != null)) ...[
-                        suffix!
-                      ] else if (style.foregroundColors?.colors != null &&
-                          style.foregroundColors!.colors.isNotEmpty &&
-                          suffix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.colors.last,
-                            BlendMode.srcIn,
-                          ),
-                          child: suffix,
-                        )
-                      ] else if (style.foregroundColors?.color != null &&
-                          suffix != null) ...[
-                        ColorFiltered(
-                          colorFilter: ColorFilter.mode(
-                            style.foregroundColors!.color,
-                            BlendMode.srcIn,
-                          ),
-                          child: suffix,
-                        )
-                      ] else ...[
-                        suffix ?? const SizedBox.shrink()
-                      ],
                     ],
-                  ),
+                    Gap(style.padding?.vertical ?? 10),
+
+                    /// Choose color
+                    ///  buttonStyle.label.style.color ??
+                    ///    context.textTheme.labelLarge.color
+                    ///
+                    /// Choose gradient
+                    /// label.gradient ??
+                    ///  buttonStyle.foregroundColor.colors ??
+                    ///    null
+                    ///
+                    /// More infos in ThemeResolver class
+                    if (label != null) ...[
+                      GradientText.fromWrapper(
+                        label!,
+                        style: style.labelStyle,
+                        gradientColors: style.foregroundColors,
+                      )
+                    ],
+                    Gap(style.padding?.vertical ?? 10),
+                    if (suffix != null &&
+                        (suffix is Icon?) &&
+                        ((suffix as Icon?)?.color != null)) ...[
+                      suffix!
+                    ] else if (style.foregroundColors?.colors != null &&
+                        style.foregroundColors!.colors.isNotEmpty &&
+                        suffix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.colors.last,
+                          BlendMode.srcIn,
+                        ),
+                        child: suffix,
+                      )
+                    ] else if (style.foregroundColors?.color != null &&
+                        suffix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.color,
+                          BlendMode.srcIn,
+                        ),
+                        child: suffix,
+                      )
+                    ] else ...[
+                      suffix ?? const SizedBox.shrink()
+                    ],
+                  ],
                 ),
               ),
             ),

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)),
+      foregroundColors: const MultiColor.single(WyattColors.black),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      backgroundColors: const MultiColor.single(WyattColors.light),
-      borderColors: const MultiColor([
+      borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
-        Color(0xFFDDE0E3),
-        Color(0xFFCACCD4),
-      ]),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
+        foregroundColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: WyattColors.lightGradient,
-        borderColors:
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
       ),
       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:
+        backgroundColors: MultiColor.single(WyattColors.black.withOpacity(0.1)),
-            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
+        borderColors: WyattColors.redGradient,
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF24262A)),
+        foregroundColors: const MultiColor.single(WyattColors.black),
-        borderColors: const MultiColor([
+        borderColors: WyattColors.greenGradient,
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
       ),
     );
   }
@@ -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)),
+      foregroundColors: const MultiColor.single(WyattColors.light),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      backgroundColors: const MultiColor.single(WyattColors.black),
-      borderColors: const MultiColor([
+      borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
-        Color(0xFF24262A),
-        Color(0xFF24262A),
-      ]),
       stroke: 2,
+      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         foregroundColors:
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
-        backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+        backgroundColors: const MultiColor.single(WyattColors.black),
-        borderColors:
+        borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
       ),
       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:
+        backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.1)),
-            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: const Color(0xFFF44464),
+          color: WyattColors.red1,
         ),
-        borderColors: const MultiColor([
+        borderColors: WyattColors.redGradient,
-          Color(0xFFF44464),
-          Color(0xFFF44464),
-        ]),
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        foregroundColors: const MultiColor.single(WyattColors.light),
-        borderColors: const MultiColor([
+        borderColors: WyattColors.greenGradient,
-          Color(0xFF00D16C),
-          Color(0xFF00D16C),
-        ]),
       ),
     );
   }

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([
+      foregroundColors: WyattColors.blueBtnGradient,
-        Color(0xFF3C97FB),
+      backgroundColors: const MultiColor.single(WyattColors.light),
-        Color(0xFF436EF4),
+      borderColors: WyattColors.blueBtnGradient,
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
       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:
+        foregroundColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).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)),
+        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor([
+        backgroundColors: WyattColors.blueBtnHoverGradient,
-          Color(0xFF3C97FB),
+        borderColors: WyattColors.blueBtnHoverGradient,
-          Color(0xFF436EF4),
+      ),
-        ]),
+      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)),
+        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor([
+        backgroundColors: WyattColors.darkBlueGradient,
-          Color(0xFF4B68FF),
+        borderColors: WyattColors.darkBlueGradient,
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
     );
   }
@@ -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)),
+      foregroundColors: const MultiColor.single(WyattColors.light),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      backgroundColors: const MultiColor.single(WyattColors.black),
-      borderColors: const MultiColor([
+      borderColors: WyattColors.blueBtnGradient,
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
       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)),
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
+        backgroundColors:
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        borderColors: WyattColors.grayGradient,
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor([
+        backgroundColors: WyattColors.blueBtnHoverGradient,
-          Color(0xFF3C97FB),
+        borderColors: WyattColors.blueBtnHoverGradient,
-          Color(0xFF436EF4),
+      ),
-        ]),
+      focusedStyle: style.copyWith(
+        stroke: 5,
+        borderColors: WyattColors.blueBtnFocusGradient,
       ),
-      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor([
+        backgroundColors: WyattColors.darkBlueGradient,
-          Color(0xFF4B68FF),
+        borderColors: WyattColors.darkBlueGradient,
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
     );
   }

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),
+      radius: BorderRadius.circular(5),
-      padding: const EdgeInsets.all(10),
+      padding: const EdgeInsets.all(5),
-      foregroundColors: const MultiColor([
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
-        Color(0xFF3C97FB),
+      backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
-        Color(0xFF436EF4),
+      animationDuration: const Duration(milliseconds: 150),
-      ]),
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
     );
+
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors:
+        foregroundColors: MultiColor.single(WyattColors.gray2.withOpacity(0.4)),
-            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,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
     );
   }
@@ -79,42 +57,24 @@ class SimpleIconButtonThemeExtensionImpl
   factory SimpleIconButtonThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
     final style = SimpleIconButtonStyle(
-      radius: BorderRadius.circular(15),
+      dimension: 30,
-      padding: const EdgeInsets.all(10),
+      radius: const BorderRadius.all(Radius.circular(5)),
-      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      padding: const EdgeInsets.all(5),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      foregroundColors: const MultiColor.single(WyattColors.light),
-      borderColors: const MultiColor([
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-        Color(0xFF3C97FB),
+      animationDuration: const Duration(milliseconds: 150),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
     );
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-        backgroundColors: const MultiColor([
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style,
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
     );
   }

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([
+      foregroundColors: const MultiColor.single(WyattColors.gray2),
-        Color(0xFF3C97FB),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-        Color(0xFF436EF4),
+      borderColors: const MultiColor.single(WyattColors.gray2),
-      ]),
+      stroke: 2,
-      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      animationDuration: const Duration(milliseconds: 150),
-      borderColors: const MultiColor([
-        Color(0xFF3C97FB),
-        Color(0xFF436EF4),
-      ]),
-      stroke: 3,
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: const Color(0xFF3C97FB).withOpacity(0.4),
+          color: WyattColors.gray1,
         ),
-        foregroundColors:
+        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-        borderColors:
-            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-          color: const Color(0xFFDDE0E3),
-        ),
-        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(
+        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
-          color: const Color(0xFFDDE0E3),
-        ),
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
-        borderColors: const MultiColor([
+          fontWeight: FontWeight.w600,
-          Color(0xFF00D16C),
+        ),
-          Color(0xFF00D16C),
+        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)),
+      foregroundColors: const MultiColor.single(WyattColors.light),
-      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-      borderColors: const MultiColor([
+      borderColors: const MultiColor.single(WyattColors.gray1),
-        Color(0xFF3C97FB),
+      stroke: 2,
-        Color(0xFF436EF4),
+      animationDuration: const Duration(milliseconds: 150),
-      ]),
-      stroke: 3,
     );
     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)),
+        foregroundColors: const MultiColor.single(WyattColors.gray1),
-        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
+        backgroundColors:
-        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
-        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors:
-        backgroundColors: const MultiColor([
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
-          Color(0xFF3C97FB),
-          Color(0xFF436EF4),
-        ]),
       ),
-      focusedStyle: style.copyWith(stroke: 5),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors:
-        backgroundColors: const MultiColor([
+            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
-        borderColors: const MultiColor([
-          Color(0xFF4B68FF),
-          Color(0xFF3531F5),
-        ]),
       ),
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
-        borderColors: const MultiColor([
+          fontSize: 14,
-          Color(0xFF00D16C),
+          fontWeight: FontWeight.w600,
-          Color(0xFF00D16C),
+        ),
-        ]),
+        foregroundColors: const MultiColor.single(WyattColors.light),
+        borderColors: WyattColors.greenGradient,
       ),
     );
   }

packages/wyatt_ui_kit/lib/src/data/theme_extensions/card_theme_extension_impl.dart

@@ -52,7 +52,9 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       borderColors: WyattColors.lightGradient,
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
-      bodyStyle: theme.textTheme.bodyMedium,
+      bodyStyle: theme.textTheme.bodyMedium?.copyWith(
+        height: 1.5,
+      ),
       minSize: const Size(330, 0),
       maxSize: const Size(390, double.infinity),
       shadow: BoxShadow(
@@ -76,7 +78,9 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       borderColors: WyattColors.grayGradient,
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
-      bodyStyle: theme.textTheme.bodyMedium,
+      bodyStyle: theme.textTheme.bodyMedium?.copyWith(
+        height: 1.5,
+      ),
       minSize: const Size(330, 0),
       maxSize: const Size(390, double.infinity),
       shadow: BoxShadow(

packages/wyatt_ui_kit/lib/src/data/theme_extensions/loader_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 LoaderThemeExtensionImpl extends LoaderThemeExtension {
   const LoaderThemeExtensionImpl({
@@ -27,9 +28,8 @@ class LoaderThemeExtensionImpl extends LoaderThemeExtension {
     theme ??= ThemeData.light();
     return const LoaderThemeExtensionImpl(
       colors: MultiColor([
-        Color(0xFF436EF4),
+        WyattColors.blue1,
-        Color(0xFF3C97FB),
+        WyattColors.light,
-        Colors.transparent,
       ]),
       stroke: 15,
     );
@@ -37,10 +37,9 @@ class LoaderThemeExtensionImpl extends LoaderThemeExtension {
 
   factory LoaderThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
-    return const LoaderThemeExtensionImpl(
+    return LoaderThemeExtensionImpl(
       colors: MultiColor([
-        Color(0xFF3C97FB),
+        ...WyattColors.blueBtnGradient.colors,
-        Color(0xFF436EF4),
         Colors.transparent,
       ]),
       stroke: 15,

packages/wyatt_ui_kit/lib/src/data/theme_extensions/rich_text_builder_theme_extension_impl.dart

@@ -49,7 +49,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
   static Map<String, TextStyle> stylesFor(ThemeData theme) => {
         'gradient-blue': GradientTextStyle.from(
           theme.textTheme.bodyMedium?.copyWith(
-            fontSize: 20,
             fontWeight: FontWeight.w600,
             height: 1.8,
           ),
@@ -60,7 +59,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
         ),
         'gradient-red': GradientTextStyle.from(
           theme.textTheme.bodyMedium?.copyWith(
-            fontSize: 20,
             fontWeight: FontWeight.w600,
             height: 1.8,
           ),
@@ -71,7 +69,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
         ),
         'gradient-green': GradientTextStyle.from(
           theme.textTheme.bodyMedium?.copyWith(
-            fontSize: 20,
             fontWeight: FontWeight.w600,
             height: 1.8,
           ),
@@ -81,7 +78,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
           ]),
         ),
         'blue': theme.textTheme.bodyMedium?.copyWith(
-              fontSize: 20,
               fontWeight: FontWeight.w600,
               color: const Color(0xFF3C97FB),
               height: 1.8,
@@ -90,7 +86,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
               color: Color(0xFF3C97FB),
             ),
         'red': theme.textTheme.bodyMedium?.copyWith(
-              fontSize: 20,
               fontWeight: FontWeight.w600,
               color: const Color(0xFFF44464),
               height: 1.8,
@@ -99,7 +94,6 @@ class RichTextBuilderThemeExtensionImpl extends RichTextBuilderThemeExtension {
               color: Color(0xFFF44464),
             ),
         'green': theme.textTheme.bodyMedium?.copyWith(
-              fontSize: 20,
               fontWeight: FontWeight.w600,
               color: const Color(0xFF00D16C),
               height: 1.8,