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

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

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

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

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

@@ -37,11 +37,10 @@ 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: textColor.color),
+          theme.textTheme.labelLarge?.copyWith(color: foregroundColor.color),
       dimension: theme.buttonTheme.height * 1.5,
       radius: (theme.buttonTheme.shape is RoundedRectangleBorder)
           ? (theme.buttonTheme.shape as RoundedRectangleBorder).borderRadius
@@ -49,7 +48,6 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       padding: theme.buttonTheme.padding,
       foregroundColors: foregroundColor,
       backgroundColors: backgroundColor,
-      animationDuration: Duration.zero,
     );
 
     return SymbolButtonThemeExtensionDefault(
@@ -57,11 +55,11 @@ class SymbolButtonThemeExtensionDefault extends SymbolButtonThemeExtension {
       focusedStyle: style,
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.80)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
       ),
       tappedStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(theme.colorScheme.primary.withOpacity(0.75)),
+            MultiColor.single(theme.colorScheme.primary.withOpacity(0.92)),
       ),
       disabledStyle: style.copyWith(
         foregroundColors:
@@ -72,8 +70,6 @@ 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(15),
+        padding: theme.cardTheme.margin ?? const EdgeInsets.all(4),
-        backgroundColors: MultiColor.single(theme.cardColor),
+        backgroundColors: MultiColor.single(theme.cardTheme.color),
-        borderColors: MultiColor.single(theme.canvasColor),
+        borderColors: MultiColor.single(theme.cardTheme.color),
         minSize: const Size(330, 0),
         maxSize: const Size(390, double.infinity),
         titleStyle: theme.textTheme.titleLarge,
         subtitleStyle: theme.textTheme.titleMedium,
         bodyStyle: theme.textTheme.bodyMedium,
-        stroke: 0,
+        stroke: 1,
         shadow: null,
       );
 

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

@@ -31,7 +31,6 @@ abstract class ButtonStyle<T> extends ThemeStyle<T> {
     this.borderColors,
     this.stroke,
     this.shadow,
-    this.animationDuration,
   });
 
   /// Button radius
@@ -69,15 +68,9 @@ 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,7 +16,6 @@
 
 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';
@@ -38,7 +37,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
-    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -63,7 +61,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
-      animationDuration: b.animationDuration,
     );
   }
 
@@ -99,11 +96,6 @@ 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,
-      ),
     );
   }
 
@@ -132,7 +124,6 @@ class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
-    Duration? animationDuration,
   }) =>
       FileSelectionButtonStyle(
         titleStyle: titleStyle ?? this.titleStyle,
@@ -144,6 +135,5 @@ 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,7 +16,6 @@
 
 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,7 +36,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
-    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,7 +59,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
-      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,11 +93,6 @@ 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,
-      ),
     );
   }
 
@@ -123,7 +115,6 @@ class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
-    Duration? animationDuration,
   }) =>
       FlatButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -134,6 +125,5 @@ 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,7 +16,6 @@
 
 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,7 +36,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
-    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -61,7 +59,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
-      animationDuration: b.animationDuration,
     );
   }
 
@@ -96,11 +93,6 @@ 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,
-      ),
     );
   }
 
@@ -123,7 +115,6 @@ class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
-    Duration? animationDuration,
   }) =>
       SimpleIconButtonStyle(
         dimension: dimension ?? this.dimension,
@@ -134,6 +125,5 @@ 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,7 +16,6 @@
 
 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';
@@ -38,7 +37,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     super.borderColors,
     super.stroke,
     super.shadow,
-    super.animationDuration,
   });
 
   /// Merges non-null `b` attributes in `a`
@@ -63,7 +61,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
       borderColors: b.borderColors,
       stroke: b.stroke,
       shadow: b.shadow,
-      animationDuration: b.animationDuration,
     );
   }
 
@@ -99,11 +96,6 @@ 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,
-      ),
     );
   }
 
@@ -132,7 +124,6 @@ class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
     MultiColor? borderColors,
     double? stroke,
     BoxShadow? shadow,
-    Duration? animationDuration,
   }) =>
       SymbolButtonStyle(
         labelStyle: labelStyle ?? this.labelStyle,
@@ -144,6 +135,5 @@ 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,40 +26,38 @@ class RichTextBuilders extends DemoPage {
   String get title => 'RichTextBuilders';
 
   @override
-  Widget build(BuildContext context) => SelectionArea(
+  Widget build(BuildContext context) => ListView(
-    child: ListView(
+        cacheExtent: 1000,
-          cacheExtent: 1000,
+        children: [
-          children: [
+          const Gap(20),
-            const Gap(20),
+          Align(
-            Align(
+            child: Text(
-              child: Text(
+              title,
-                title,
+              style: Theme.of(context).textTheme.titleLarge,
-                style: Theme.of(context).textTheme.titleLarge,
-              ),
             ),
-            const Gap(20),
+          ),
-            const Padding(
+          const Gap(20),
-              padding: EdgeInsets.all(8),
+          const Padding(
-              child: RichTextBuilder(
+            padding: EdgeInsets.all(8),
-                text: '''
+            child: RichTextBuilder(
-  Innovation, Expertise et Accompagnement...
+              text: '''
-  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.
+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.
 
-  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 Padding(
+          const Gap(20),
-              padding: EdgeInsets.all(8),
+          const Padding(
-              child: RichTextBuilder(
+            padding: EdgeInsets.all(8),
-                text: '''
+            child: RichTextBuilder(
-  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.
+              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.
-              ),
+            ''',
             ),
-            const Gap(20),
+          ),
-          ],
+          const Gap(20),
-        ),
+        ],
-  );
+      );
 }

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

@@ -1,68 +0,0 @@
-// 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,7 +19,6 @@ 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';
@@ -131,109 +130,119 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             onPressed?.call(state.state);
             bloc(context).onClickUpOut();
           },
-          child: AnimatedDecoratedBox(
+          child: AnimatedContainer(
-            duration: style.animationDuration ?? Duration.zero,
+            // TODO(wyatt): make it configurable, and generalize it
+            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: ConstrainedBox(
+            child: DecoratedBox(
-              constraints: const BoxConstraints(
+              decoration: BoxDecoration(
-                minWidth: 88,
+                // If no border color => no default value
-                minHeight: 36,
+                border: (style.borderColors != null && style.stroke != null)
-              ), // min sizes for Material buttons
+                    ? (style.borderColors?.isGradient ?? false)
-              child: Padding(
+                        ? GradientBoxBorder(
-                padding: style.padding ?? EdgeInsets.zero,
+                            gradient: LinearGradient(
-                child: Row(
+                              colors: style.borderColors!.colors,
-                  mainAxisSize: mainAxisSize ?? MainAxisSize.min,
+                            ),
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            width: style.stroke!,
-                  children: [
+                          )
-                    if (prefix != null &&
+                        : Border.all(
-                        (prefix is Icon?) &&
+                            color: style.borderColors!.color,
-                        ((prefix as Icon?)?.color != null)) ...[
+                            width: style.stroke!,
-                      prefix!
+                          )
-                    ] else if (style.foregroundColors?.color != null &&
+                    : 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
+                boxShadow: [
-                    ///  buttonStyle.label.style.color ??
+                  if (style.shadow != null) ...[style.shadow!]
-                    ///    context.textTheme.labelLarge.color
+                ],
-                    ///
+                borderRadius: style.radius,
-                    /// Choose gradient
+              ),
-                    /// label.gradient ??
+              child: ConstrainedBox(
-                    ///  buttonStyle.foregroundColor.colors ??
+                constraints: const BoxConstraints(
-                    ///    null
+                  minWidth: 88,
-                    ///
+                  minHeight: 36,
-                    /// More infos in ThemeResolver class
+                ), // min sizes for Material buttons
-                    if (label != null) ...[
+                child: Padding(
-                      GradientText.fromWrapper(
+                  padding: style.padding ?? EdgeInsets.zero,
-                        label!,
+                  child: Row(
-                        style: style.labelStyle,
+                    mainAxisSize: mainAxisSize ?? MainAxisSize.min,
-                        gradientColors: style.foregroundColors,
+                    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),
+                  ),
-                    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,7 +18,6 @@ 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';
@@ -127,8 +126,7 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             dimension: style.dimension,
             child: AspectRatio(
               aspectRatio: 1,
-              child: AnimatedDecoratedBox(
+              child: DecoratedBox(
-                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,7 +19,6 @@ 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';
@@ -155,8 +154,7 @@ class SymbolButtonScreen
                 dimension: style.dimension,
                 child: AspectRatio(
                   aspectRatio: 1,
-                  child: AnimatedDecoratedBox(
+                  child: DecoratedBox(
-                    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,7 +16,6 @@
 
 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 {
@@ -37,39 +36,50 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(WyattColors.black),
+      foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-      backgroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
+      borderColors: const MultiColor([
+        Color(0xFFDDE0E3),
+        Color(0xFFCACCD4),
+      ]),
       stroke: 2,
-      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
+        foregroundColors:
-        backgroundColors: const MultiColor.single(WyattColors.light),
+            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
-        borderColors: WyattColors.lightGradient,
+        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors:
+            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(WyattColors.black.withOpacity(0.04)),
+            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.black.withOpacity(0.1)),
+        backgroundColors:
+            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: WyattColors.red1,
+          color: const Color(0xFFF44464),
         ),
-        borderColors: WyattColors.redGradient,
+        borderColors: const MultiColor([
+          Color(0xFFF44464),
+          Color(0xFFF44464),
+        ]),
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.black),
+        foregroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors: WyattColors.greenGradient,
+        borderColors: const MultiColor([
+          Color(0xFF00D16C),
+          Color(0xFF00D16C),
+        ]),
       ),
     );
   }
@@ -81,40 +91,50 @@ class FileSelectionButtonThemeExtensionImpl
       subtitleStyle: theme.textTheme.labelSmall,
       radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(13),
-      foregroundColors: const MultiColor.single(WyattColors.light),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(WyattColors.black),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
+      borderColors: const MultiColor([
+        Color(0xFF24262A),
+        Color(0xFF24262A),
+      ]),
       stroke: 2,
-      animationDuration: const Duration(milliseconds: 150),
     );
     return FileSelectionButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         foregroundColors:
-            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
-        backgroundColors: const MultiColor.single(WyattColors.black),
+        backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-        borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        borderColors:
+            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
       ),
       hoveredStyle: style.copyWith(
         backgroundColors:
-            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
       ),
       focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.1)),
+        backgroundColors:
+            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
       ),
       invalidStyle: style.copyWith(
         subtitleStyle: theme.textTheme.labelSmall?.copyWith(
           fontSize: 11,
           fontWeight: FontWeight.w400,
-          color: WyattColors.red1,
+          color: const Color(0xFFF44464),
         ),
-        borderColors: WyattColors.redGradient,
+        borderColors: const MultiColor([
+          Color(0xFFF44464),
+          Color(0xFFF44464),
+        ]),
       ),
       // Unused
       selectedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.light),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        borderColors: WyattColors.greenGradient,
+        borderColors: const MultiColor([
+          Color(0xFF00D16C),
+          Color(0xFF00D16C),
+        ]),
       ),
     );
   }

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

@@ -16,7 +16,6 @@
 
 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({
@@ -33,42 +32,54 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: WyattColors.blueBtnGradient,
+      foregroundColors: const MultiColor([
-      backgroundColors: const MultiColor.single(WyattColors.light),
+        Color(0xFF3C97FB),
-      borderColors: WyattColors.blueBtnGradient,
+        Color(0xFF436EF4),
+      ]),
+      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: WyattColors.blue1.withOpacity(0.4),
+          color: const Color(0xFF3C97FB).withOpacity(0.4),
         ),
-        foregroundColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
+        foregroundColors:
-        backgroundColors: const MultiColor.single(WyattColors.light),
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors:
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: WyattColors.light,
+          color: const Color(0xFFDDE0E3),
         ),
-        foregroundColors: const MultiColor.single(WyattColors.light),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: WyattColors.blueBtnHoverGradient,
+        backgroundColors: const MultiColor([
-        borderColors: WyattColors.blueBtnHoverGradient,
+          Color(0xFF3C97FB),
-      ),
+          Color(0xFF436EF4),
-      focusedStyle: style.copyWith(
+        ]),
-        stroke: 5,
-        borderColors: WyattColors.blueBtnFocusGradient,
       ),
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: WyattColors.light,
+          color: const Color(0xFFDDE0E3),
         ),
-        foregroundColors: const MultiColor.single(WyattColors.light),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: WyattColors.darkBlueGradient,
+        backgroundColors: const MultiColor([
-        borderColors: WyattColors.darkBlueGradient,
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
+        borderColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
       ),
     );
   }
@@ -79,37 +90,43 @@ class FlatButtonThemeExtensionImpl extends FlatButtonThemeExtension {
       labelStyle: theme.textTheme.labelLarge,
       radius: BorderRadius.circular(15),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.light),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: const MultiColor.single(WyattColors.black),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: WyattColors.blueBtnGradient,
+      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: WyattColors.gray1,
+          color: const Color(0xFF60656A),
         ),
-        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors:
+        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-            MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
-        borderColors: WyattColors.grayGradient,
         stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.light),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: WyattColors.blueBtnHoverGradient,
+        backgroundColors: const MultiColor([
-        borderColors: WyattColors.blueBtnHoverGradient,
+          Color(0xFF3C97FB),
-      ),
+          Color(0xFF436EF4),
-      focusedStyle: style.copyWith(
+        ]),
-        stroke: 5,
-        borderColors: WyattColors.blueBtnFocusGradient,
       ),
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.light),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-        backgroundColors: WyattColors.darkBlueGradient,
+        backgroundColors: const MultiColor([
-        borderColors: WyattColors.darkBlueGradient,
+          Color(0xFF4B68FF),
+          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,7 +16,6 @@
 
 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 {
@@ -32,24 +31,47 @@ class SimpleIconButtonThemeExtensionImpl
     theme ??= ThemeData.light();
     final style = SimpleIconButtonStyle(
       dimension: 30,
-      radius: BorderRadius.circular(5),
+      radius: BorderRadius.circular(15),
-      padding: const EdgeInsets.all(5),
+      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      foregroundColors: const MultiColor([
-      backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
+        Color(0xFF3C97FB),
-      animationDuration: const Duration(milliseconds: 150),
+        Color(0xFF436EF4),
+      ]),
+      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      borderColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
     );
-
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: MultiColor.single(WyattColors.gray2.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)),
+        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
       ),
-      focusedStyle: style,
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
+        borderColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
       ),
     );
   }
@@ -57,24 +79,42 @@ class SimpleIconButtonThemeExtensionImpl
   factory SimpleIconButtonThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
     final style = SimpleIconButtonStyle(
-      dimension: 30,
+      radius: BorderRadius.circular(15),
-      radius: const BorderRadius.all(Radius.circular(5)),
+      padding: const EdgeInsets.all(10),
-      padding: const EdgeInsets.all(5),
+      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([
-      animationDuration: const Duration(milliseconds: 150),
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
     );
     return SimpleIconButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
-        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
+        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
+        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
       ),
-      focusedStyle: style,
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.5)),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        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,7 +16,6 @@
 
 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({
@@ -32,38 +31,63 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.light();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      dimension: 60,
+      radius: BorderRadius.circular(15),
-      radius: BorderRadius.circular(12),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.gray2),
+      foregroundColors: const MultiColor([
-      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+        Color(0xFF3C97FB),
-      borderColors: const MultiColor.single(WyattColors.gray2),
+        Color(0xFF436EF4),
-      stroke: 2,
+      ]),
-      animationDuration: const Duration(milliseconds: 150),
+      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      borderColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: WyattColors.gray1,
+          color: const Color(0xFF3C97FB).withOpacity(0.4),
         ),
-        foregroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        foregroundColors:
-        backgroundColors: const MultiColor.single(WyattColors.light),
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
-        borderColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors:
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          color: const Color(0xFFDDE0E3),
+        ),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
       ),
-      focusedStyle: style.copyWith(stroke: 4),
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.4)),
+        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),
+        ]),
       ),
       selectedStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-          fontWeight: FontWeight.w600,
+        borderColors: const MultiColor([
-        ),
+          Color(0xFF00D16C),
-        foregroundColors: const MultiColor.single(WyattColors.gray2),
+          Color(0xFF00D16C),
-        borderColors: WyattColors.greenGradient,
+        ]),
       ),
     );
   }
@@ -72,41 +96,52 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
     theme ??= ThemeData.dark();
     final style = SymbolButtonStyle(
       labelStyle: theme.textTheme.labelLarge,
-      dimension: 60,
+      radius: BorderRadius.circular(15),
-      radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.light),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
-      borderColors: const MultiColor.single(WyattColors.gray1),
+      borderColors: const MultiColor([
-      stroke: 2,
+        Color(0xFF3C97FB),
-      animationDuration: const Duration(milliseconds: 150),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
     );
     return SymbolButtonThemeExtensionImpl(
       normalStyle: style,
       disabledStyle: style.copyWith(
         labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: WyattColors.gray1,
+          color: const Color(0xFF60656A),
         ),
-        foregroundColors: const MultiColor.single(WyattColors.gray1),
+        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
-        backgroundColors:
+        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
-            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
+        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
+        stroke: 1,
       ),
       hoveredStyle: style.copyWith(
-        backgroundColors:
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
       ),
-      focusedStyle: style.copyWith(stroke: 4),
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
-        backgroundColors:
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
+        backgroundColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
+        borderColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
       ),
       selectedStyle: style.copyWith(
-        labelStyle: theme.textTheme.labelLarge?.copyWith(
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
-          fontSize: 14,
+        borderColors: const MultiColor([
-          fontWeight: FontWeight.w600,
+          Color(0xFF00D16C),
-        ),
+          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,9 +52,7 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       borderColors: WyattColors.lightGradient,
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
-      bodyStyle: theme.textTheme.bodyMedium?.copyWith(
+      bodyStyle: theme.textTheme.bodyMedium,
-        height: 1.5,
-      ),
       minSize: const Size(330, 0),
       maxSize: const Size(390, double.infinity),
       shadow: BoxShadow(
@@ -78,9 +76,7 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       borderColors: WyattColors.grayGradient,
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
-      bodyStyle: theme.textTheme.bodyMedium?.copyWith(
+      bodyStyle: theme.textTheme.bodyMedium,
-        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,7 +16,6 @@
 
 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({
@@ -28,8 +27,9 @@ class LoaderThemeExtensionImpl extends LoaderThemeExtension {
     theme ??= ThemeData.light();
     return const LoaderThemeExtensionImpl(
       colors: MultiColor([
-        WyattColors.blue1,
+        Color(0xFF436EF4),
-        WyattColors.light,
+        Color(0xFF3C97FB),
+        Colors.transparent,
       ]),
       stroke: 15,
     );
@@ -37,9 +37,10 @@ class LoaderThemeExtensionImpl extends LoaderThemeExtension {
 
   factory LoaderThemeExtensionImpl.dark({ThemeData? theme}) {
     theme ??= ThemeData.dark();
-    return LoaderThemeExtensionImpl(
+    return const LoaderThemeExtensionImpl(
       colors: MultiColor([
-        ...WyattColors.blueBtnGradient.colors,
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
         Colors.transparent,
       ]),
       stroke: 15,

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

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