23 changed files with 406 additions and 410 deletions
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/file_selection_button_theme_extension_default.dart
+++ b/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(
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/flat_button_theme_extension_default.dart
+++ b/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(
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/simple_icon_button_theme_extension_default.dart
+++ b/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:
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/button_theme_extension/symbol_button_theme_extension_default.dart
+++ b/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,
      ),
    );
  }
--- a/packages/wyatt_ui_components/lib/src/data/theme_extensions/card_theme_extension_default.dart
+++ b/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),
-        backgroundColors: MultiColor.single(theme.cardColor),
-        borderColors: MultiColor.single(theme.canvasColor),
+        padding: theme.cardTheme.margin ?? const EdgeInsets.all(4),
+        backgroundColors: MultiColor.single(theme.cardTheme.color),
+        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,
      );

--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/button_style.dart
+++ b/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, '
-      'animationDuration: $animationDuration)';
+      '$borderColors, stroke: $stroke, shadow: $shadow)';
 }
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_style.dart
+++ b/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,
      );
 }
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_style.dart
+++ b/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,
      );
 }
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_style.dart
+++ b/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,
      );
 }
--- a/packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_style.dart
+++ b/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,
      );
 }
--- a/packages/wyatt_ui_kit/example/lib/buttons/buttons.dart
+++ b/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()),
        ],
      );
 }
--- a/packages/wyatt_ui_kit/example/lib/rich_text_builders/rich_text_builders.dart
+++ b/packages/wyatt_ui_kit/example/lib/rich_text_builders/rich_text_builders.dart
@ -26,8 +26,7 @@ class RichTextBuilders extends DemoPage {
  String get title => 'RichTextBuilders';

  @override
-  Widget build(BuildContext context) => SelectionArea(
-    child: ListView(
+  Widget build(BuildContext context) => ListView(
        cacheExtent: 1000,
        children: [
          const Gap(20),
@ -42,10 +41,10 @@ class RichTextBuilders extends DemoPage {
            padding: EdgeInsets.all(8),
            child: RichTextBuilder(
              text: '''
-  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.
+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 !
            ''',
            ),
          ),
@ -54,12 +53,11 @@ class RichTextBuilders extends DemoPage {
            padding: EdgeInsets.all(8),
            child: RichTextBuilder(
              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),
        ],
-        ),
      );
 }
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/animated_decorated_box.dart
+++ b/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?;
-  }
-}
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/flat_button/flat_button_screen.dart
+++ b/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,15 +130,24 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
            onPressed?.call(state.state);
            bloc(context).onClickUpOut();
          },
-          child: AnimatedDecoratedBox(
-            duration: style.animationDuration ?? Duration.zero,
+          child: AnimatedContainer(
+            // 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,
+
+              borderRadius: style.radius,
+            ),
+            child: DecoratedBox(
+              decoration: BoxDecoration(
                // If no border color => no default value
                border: (style.borderColors != null && style.stroke != null)
                    ? (style.borderColors?.isGradient ?? false)
@ -240,6 +248,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
            ),
          ),
        ),
+      ),
    );
  }
 }
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/simple_icon_button/simple_icon_screen.dart
+++ b/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(
-                duration: style.animationDuration ?? Duration.zero,
+              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: style.backgroundColors?.color,
                  // If no border color => no default value
--- a/packages/wyatt_ui_kit/lib/src/components/buttons/symbol_button/symbol_button_screen.dart
+++ b/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(
-                    duration: style.animationDuration ?? Duration.zero,
+                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: style.backgroundColors?.color,
                      // If no border color => no default value
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/file_selection_button_theme_extension_impl.dart
+++ b/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),
-      backgroundColors: const MultiColor.single(WyattColors.light),
-      borderColors: MultiColor.single(WyattColors.black.withOpacity(0.4)),
+      foregroundColors: const MultiColor.single(Color(0xFF24262A)),
+      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      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)),
-        backgroundColors: const MultiColor.single(WyattColors.light),
-        borderColors: WyattColors.lightGradient,
+        foregroundColors:
+            MultiColor.single(const Color(0xFF24262A).withOpacity(0.4)),
+        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),
-        borderColors: WyattColors.greenGradient,
+        foregroundColors: const MultiColor.single(Color(0xFF24262A)),
+        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),
-      backgroundColors: const MultiColor.single(WyattColors.black),
-      borderColors: MultiColor.single(WyattColors.light.withOpacity(0.4)),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      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)),
-        backgroundColors: const MultiColor.single(WyattColors.black),
-        borderColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
+            MultiColor.single(const Color(0xFFDDE0E3).withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+        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),
-        borderColors: WyattColors.greenGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: const MultiColor([
+          Color(0xFF00D16C),
+          Color(0xFF00D16C),
+        ]),
      ),
    );
  }
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/flat_button_theme_extension_impl.dart
+++ b/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,
-      backgroundColors: const MultiColor.single(WyattColors.light),
-      borderColors: WyattColors.blueBtnGradient,
+      foregroundColors: const MultiColor([
+        Color(0xFF3C97FB),
+        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)),
-        backgroundColors: const MultiColor.single(WyattColors.light),
-        borderColors: MultiColor.single(WyattColors.blue1.withOpacity(0.4)),
+        foregroundColors:
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors:
+            MultiColor.single(const Color(0xFF3C97FB).withOpacity(0.4)),
        stroke: 1,
      ),
      hoveredStyle: style.copyWith(
        labelStyle: theme.textTheme.labelLarge?.copyWith(
-          color: WyattColors.light,
+          color: const Color(0xFFDDE0E3),
        ),
-        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: WyattColors.blueBtnHoverGradient,
-        borderColors: WyattColors.blueBtnHoverGradient,
-      ),
-      focusedStyle: style.copyWith(
-        stroke: 5,
-        borderColors: WyattColors.blueBtnFocusGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
      ),
+      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),
-        backgroundColors: WyattColors.darkBlueGradient,
-        borderColors: WyattColors.darkBlueGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          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),
-      backgroundColors: const MultiColor.single(WyattColors.black),
-      borderColors: WyattColors.blueBtnGradient,
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      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),
-        backgroundColors:
-            MultiColor.single(WyattColors.light.withOpacity(0.04)),
-        borderColors: WyattColors.grayGradient,
+        foregroundColors: const MultiColor.single(Color(0xFF60656A)),
+        backgroundColors: const MultiColor.single(Color(0xFF33373E)),
+        borderColors: const MultiColor([Color(0xFF60656A), Color(0xFF383C40)]),
        stroke: 1,
      ),
      hoveredStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: WyattColors.blueBtnHoverGradient,
-        borderColors: WyattColors.blueBtnHoverGradient,
-      ),
-      focusedStyle: style.copyWith(
-        stroke: 5,
-        borderColors: WyattColors.blueBtnFocusGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
      ),
+      focusedStyle: style.copyWith(stroke: 5),
      tappedStyle: style.copyWith(
-        foregroundColors: const MultiColor.single(WyattColors.light),
-        backgroundColors: WyattColors.darkBlueGradient,
-        borderColors: WyattColors.darkBlueGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
+        borderColors: const MultiColor([
+          Color(0xFF4B68FF),
+          Color(0xFF3531F5),
+        ]),
      ),
    );
  }
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/simple_icon_button_theme_extension_impl.dart
+++ b/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),
-      padding: const EdgeInsets.all(5),
-      foregroundColors: const MultiColor.single(WyattColors.gray2),
-      backgroundColors: MultiColor.single(WyattColors.gray1.withOpacity(0.2)),
-      animationDuration: const Duration(milliseconds: 150),
+      radius: BorderRadius.circular(15),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      backgroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      borderColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
    );
-
    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: const BorderRadius.all(Radius.circular(5)),
-      padding: const EdgeInsets.all(5),
-      foregroundColors: const MultiColor.single(WyattColors.light),
-      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-      animationDuration: const Duration(milliseconds: 150),
+      radius: BorderRadius.circular(15),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      borderColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      stroke: 3,
    );
    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),
+        ]),
      ),
    );
  }
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/symbol_button_theme_extension_impl.dart
+++ b/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(12),
+      radius: BorderRadius.circular(15),
      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.gray2),
-      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-      borderColors: const MultiColor.single(WyattColors.gray2),
-      stroke: 2,
-      animationDuration: const Duration(milliseconds: 150),
+      foregroundColors: const MultiColor([
+        Color(0xFF3C97FB),
+        Color(0xFF436EF4),
+      ]),
+      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)),
-        backgroundColors: const MultiColor.single(WyattColors.light),
-        borderColors: MultiColor.single(WyattColors.gray1.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)),
+        labelStyle: theme.textTheme.labelLarge?.copyWith(
+          color: const Color(0xFFDDE0E3),
        ),
-      focusedStyle: style.copyWith(stroke: 4),
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        backgroundColors: const MultiColor([
+          Color(0xFF3C97FB),
+          Color(0xFF436EF4),
+        ]),
+      ),
+      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(
-          fontWeight: FontWeight.w600,
-        ),
-        foregroundColors: const MultiColor.single(WyattColors.gray2),
-        borderColors: WyattColors.greenGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: const MultiColor([
+          Color(0xFF00D16C),
+          Color(0xFF00D16C),
+        ]),
      ),
    );
  }
@ -72,41 +96,52 @@ class SymbolButtonThemeExtensionImpl extends SymbolButtonThemeExtension {
    theme ??= ThemeData.dark();
    final style = SymbolButtonStyle(
      labelStyle: theme.textTheme.labelLarge,
-      dimension: 60,
-      radius: const BorderRadius.all(Radius.circular(12)),
+      radius: BorderRadius.circular(15),
      padding: const EdgeInsets.all(10),
-      foregroundColors: const MultiColor.single(WyattColors.light),
-      backgroundColors: MultiColor.single(WyattColors.light.withOpacity(0.04)),
-      borderColors: const MultiColor.single(WyattColors.gray1),
-      stroke: 2,
-      animationDuration: const Duration(milliseconds: 150),
+      foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+      backgroundColors: const MultiColor.single(Color(0xFF24262A)),
+      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(0xFF60656A),
        ),
-        foregroundColors: const MultiColor.single(WyattColors.gray1),
-        backgroundColors:
-            MultiColor.single(WyattColors.gray1.withOpacity(0.04)),
+        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.04)),
+        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.04)),
+        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(
-          fontSize: 14,
-          fontWeight: FontWeight.w600,
-        ),
-        foregroundColors: const MultiColor.single(WyattColors.light),
-        borderColors: WyattColors.greenGradient,
+        foregroundColors: const MultiColor.single(Color(0xFFDDE0E3)),
+        borderColors: const MultiColor([
+          Color(0xFF00D16C),
+          Color(0xFF00D16C),
+        ]),
      ),
    );
  }
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/card_theme_extension_impl.dart
+++ b/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(
-        height: 1.5,
-      ),
+      bodyStyle: theme.textTheme.bodyMedium,
      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(
-        height: 1.5,
-      ),
+      bodyStyle: theme.textTheme.bodyMedium,
      minSize: const Size(330, 0),
      maxSize: const Size(390, double.infinity),
      shadow: BoxShadow(
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/loader_theme_extension_impl.dart
+++ b/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,
-        WyattColors.light,
+        Color(0xFF436EF4),
+        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,
--- a/packages/wyatt_ui_kit/lib/src/data/theme_extensions/rich_text_builder_theme_extension_impl.dart
+++ b/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,