feat(ui_kit): add theme extension support in buttons + theme negociation

packages/wyatt_ui_components/lib/src/core/extensions/build_context_extensions.dart

@@ -19,4 +19,7 @@ import 'package:wyatt_ui_components/src/features/features.dart';
 
 extension ThemeComponentBuildContext on BuildContext {
   ComponentThemeData get components => ComponentTheme.of(this);
+  TextTheme get textTheme => Theme.of(this).textTheme;
+  ColorScheme get colorScheme => Theme.of(this).colorScheme;
+  ButtonThemeData get buttonTheme => Theme.of(this).buttonTheme;
 }

packages/wyatt_ui_components/lib/src/core/utils/multi_color.dart

@@ -42,4 +42,14 @@ class MultiColor {
 
   bool get isGradient =>
       (_colors?.isNotEmpty ?? false) && (_colors?.length ?? 0) > 1;
+
+  static MultiColor? lerp(MultiColor? a, MultiColor? b, double t) {
+    if (a == null && b == null) {
+      return null;
+    }
+    if (b == null) {
+      return a;
+    }
+    return b;
+  }
 }

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

@@ -30,25 +30,25 @@ abstract class ButtonComponent extends Component {
   });
 
   /// Style of this button in disabled state
-  final ButtonStyle? disabledStyle;
+  final ButtonStyle<dynamic>? disabledStyle;
 
   /// Style of this button in normal state
-  final ButtonStyle? normalStyle;
+  final ButtonStyle<dynamic>? normalStyle;
 
   /// Style of this button in hovered state
-  final ButtonStyle? hoveredStyle;
+  final ButtonStyle<dynamic>? hoveredStyle;
 
   /// Style of this button in focused state
-  final ButtonStyle? focusedStyle;
+  final ButtonStyle<dynamic>? focusedStyle;
 
   /// Style of this button in tapped state
-  final ButtonStyle? tappedStyle;
+  final ButtonStyle<dynamic>? tappedStyle;
 
   /// Style of this button in selected state
-  final ButtonStyle? selectedStyle;
+  final ButtonStyle<dynamic>? selectedStyle;
 
   /// Style of this button in invalid state
-  final ButtonStyle? invalidStyle;
+  final ButtonStyle<dynamic>? invalidStyle;
 
   /// Callback on button press
   final void Function(ControlState state)? onPressed;

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

@@ -17,41 +17,49 @@
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 
-abstract class ButtonStyle {
+abstract class ButtonStyle<T> {
   const ButtonStyle({
-    this.radius = 15,
-    this.padding = 10,
+    this.radius,
+    this.padding,
     this.foregroundColors,
     this.backgroundColors,
     this.borderColors,
-    this.stroke = 2,
-    this.shadow = const BoxShadow(
-      blurRadius: 30,
-      offset: Offset(0, 5),
-      color: Color.fromRGBO(0, 0, 0, 0.05),
-    ),
+    this.stroke,
+    this.shadow,
   });
 
   /// Button radius
-  final double? radius;
+  ///
+  /// Default to `BorderRadius.all(Radius.circular(4.0))`
+  final BorderRadiusGeometry? radius;
 
-  /// Padding and gaps of this card
-  final double? padding;
+  /// Padding and gaps of this button
+  ///
+  /// Default to `ButtonTheme.padding`
+  final EdgeInsetsGeometry? padding;
 
   /// Button foreground gradient colors (from left to right)
+  ///
+  /// Default to `Theme.colorScheme.onPrimary`
   final MultiColor? foregroundColors;
 
   /// Button background gradient colors (from left to right)
+  ///
+  /// Default to `Theme.colorScheme.primary`
   final MultiColor? backgroundColors;
 
   /// Border colors (from left to right).
+  ///
+  /// Default to `null`
   final MultiColor? borderColors;
 
   /// Stroke of the border
+  ///
+  /// Default to `null`
   final double? stroke;
 
   /// Drop shadow
+  ///
+  /// Default to `null`
   final BoxShadow? shadow;
-
-  ButtonStyle copyWith();
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/file_selection_button_component.g.dart

@@ -11,13 +11,15 @@ abstract class $FileSelectionButtonComponentCWProxy {
   FileSelectionButtonComponent leading(Widget? leading);
   FileSelectionButtonComponent title(TextWrapper? title);
   FileSelectionButtonComponent subTitle(TextWrapper? subTitle);
-  FileSelectionButtonComponent disabledStyle(ButtonStyle? disabledStyle);
-  FileSelectionButtonComponent normalStyle(ButtonStyle? normalStyle);
-  FileSelectionButtonComponent hoveredStyle(ButtonStyle? hoveredStyle);
-  FileSelectionButtonComponent focusedStyle(ButtonStyle? focusedStyle);
-  FileSelectionButtonComponent tappedStyle(ButtonStyle? tappedStyle);
-  FileSelectionButtonComponent selectedStyle(ButtonStyle? selectedStyle);
-  FileSelectionButtonComponent invalidStyle(ButtonStyle? invalidStyle);
+  FileSelectionButtonComponent disabledStyle(
+      ButtonStyle<dynamic>? disabledStyle);
+  FileSelectionButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  FileSelectionButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  FileSelectionButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  FileSelectionButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  FileSelectionButtonComponent selectedStyle(
+      ButtonStyle<dynamic>? selectedStyle);
+  FileSelectionButtonComponent invalidStyle(ButtonStyle<dynamic>? invalidStyle);
   FileSelectionButtonComponent onPressed(
       void Function(ControlState)? onPressed);
   FileSelectionButtonComponent key(Key? key);
@@ -26,13 +28,13 @@ abstract class $FileSelectionButtonComponentCWProxy {
     Widget? leading,
     TextWrapper? title,
     TextWrapper? subTitle,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
-    ButtonStyle? invalidStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
+    ButtonStyle<dynamic>? invalidStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   });

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

@@ -14,42 +14,85 @@
 // 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-class FileSelectionButtonStyle extends ButtonStyle {
+part 'file_selection_button_style.g.dart';
+
+@CopyWith()
+class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
   const FileSelectionButtonStyle({
-    super.radius = 12,
-    super.padding = 13,
+    this.title,
+    this.subTitle,
+    super.radius,
+    super.padding,
     super.foregroundColors,
     super.backgroundColors,
     super.borderColors,
-    super.stroke = 2,
-    super.shadow = const BoxShadow(
-      blurRadius: 30,
-      offset: Offset(0, 5),
-      color: Color.fromRGBO(0, 0, 0, 0.05),
-    ),
+    super.stroke,
+    super.shadow,
   });
 
-  @override
-  FileSelectionButtonStyle copyWith({
-    double? radius,
-    double? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  }) =>
+  /// Used in negociation to build a style from Flutter default values.
+  factory FileSelectionButtonStyle.fromFlutter(BuildContext context) =>
       FileSelectionButtonStyle(
-        radius: radius ?? this.radius,
-        padding: padding ?? this.padding,
-        foregroundColors: foregroundColors ?? this.foregroundColors,
-        backgroundColors: backgroundColors ?? this.backgroundColors,
-        borderColors: borderColors ?? this.borderColors,
-        stroke: stroke ?? this.stroke,
-        shadow: shadow ?? this.shadow,
+        title: context.textTheme.labelLarge,
+        subTitle: context.textTheme.labelSmall,
+        radius: (context.buttonTheme.shape is RoundedRectangleBorder)
+            ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
+            : null,
+        padding: context.buttonTheme.padding,
+        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
+        backgroundColors: MultiColor.single(context.colorScheme.primary),
       );
+
+  /// Used for interpolation.
+  static FileSelectionButtonStyle? lerp(
+    FileSelectionButtonStyle? a,
+    FileSelectionButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      title: TextStyle.lerp(a.title, b.title, t),
+      subTitle: TextStyle.lerp(a.title, b.title, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Title text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? title;
+
+  /// Sub title text style
+  ///
+  /// Default to `TextTheme.labelSmall`
+  final TextStyle? subTitle;
 }

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

@@ -0,0 +1,152 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'file_selection_button_style.dart';
+
+// **************************************************************************
+// CopyWithGenerator
+// **************************************************************************
+
+abstract class _$FileSelectionButtonStyleCWProxy {
+  FileSelectionButtonStyle title(TextStyle? title);
+
+  FileSelectionButtonStyle subTitle(TextStyle? subTitle);
+
+  FileSelectionButtonStyle radius(BorderRadiusGeometry? radius);
+
+  FileSelectionButtonStyle padding(EdgeInsetsGeometry? padding);
+
+  FileSelectionButtonStyle foregroundColors(MultiColor? foregroundColors);
+
+  FileSelectionButtonStyle backgroundColors(MultiColor? backgroundColors);
+
+  FileSelectionButtonStyle borderColors(MultiColor? borderColors);
+
+  FileSelectionButtonStyle stroke(double? stroke);
+
+  FileSelectionButtonStyle shadow(BoxShadow? shadow);
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FileSelectionButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// FileSelectionButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  FileSelectionButtonStyle call({
+    TextStyle? title,
+    TextStyle? subTitle,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  });
+}
+
+/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfFileSelectionButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfFileSelectionButtonStyle.copyWith.fieldName(...)`
+class _$FileSelectionButtonStyleCWProxyImpl
+    implements _$FileSelectionButtonStyleCWProxy {
+  const _$FileSelectionButtonStyleCWProxyImpl(this._value);
+
+  final FileSelectionButtonStyle _value;
+
+  @override
+  FileSelectionButtonStyle title(TextStyle? title) => this(title: title);
+
+  @override
+  FileSelectionButtonStyle subTitle(TextStyle? subTitle) =>
+      this(subTitle: subTitle);
+
+  @override
+  FileSelectionButtonStyle radius(BorderRadiusGeometry? radius) =>
+      this(radius: radius);
+
+  @override
+  FileSelectionButtonStyle padding(EdgeInsetsGeometry? padding) =>
+      this(padding: padding);
+
+  @override
+  FileSelectionButtonStyle foregroundColors(MultiColor? foregroundColors) =>
+      this(foregroundColors: foregroundColors);
+
+  @override
+  FileSelectionButtonStyle backgroundColors(MultiColor? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
+
+  @override
+  FileSelectionButtonStyle borderColors(MultiColor? borderColors) =>
+      this(borderColors: borderColors);
+
+  @override
+  FileSelectionButtonStyle stroke(double? stroke) => this(stroke: stroke);
+
+  @override
+  FileSelectionButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
+
+  @override
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FileSelectionButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// FileSelectionButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  FileSelectionButtonStyle call({
+    Object? title = const $CopyWithPlaceholder(),
+    Object? subTitle = const $CopyWithPlaceholder(),
+    Object? radius = const $CopyWithPlaceholder(),
+    Object? padding = const $CopyWithPlaceholder(),
+    Object? foregroundColors = const $CopyWithPlaceholder(),
+    Object? backgroundColors = const $CopyWithPlaceholder(),
+    Object? borderColors = const $CopyWithPlaceholder(),
+    Object? stroke = const $CopyWithPlaceholder(),
+    Object? shadow = const $CopyWithPlaceholder(),
+  }) {
+    return FileSelectionButtonStyle(
+      title: title == const $CopyWithPlaceholder()
+          ? _value.title
+          // ignore: cast_nullable_to_non_nullable
+          : title as TextStyle?,
+      subTitle: subTitle == const $CopyWithPlaceholder()
+          ? _value.subTitle
+          // ignore: cast_nullable_to_non_nullable
+          : subTitle as TextStyle?,
+      radius: radius == const $CopyWithPlaceholder()
+          ? _value.radius
+          // ignore: cast_nullable_to_non_nullable
+          : radius as BorderRadiusGeometry?,
+      padding: padding == const $CopyWithPlaceholder()
+          ? _value.padding
+          // ignore: cast_nullable_to_non_nullable
+          : padding as EdgeInsetsGeometry?,
+      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
+          ? _value.foregroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : foregroundColors as MultiColor?,
+      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
+          ? _value.backgroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : backgroundColors as MultiColor?,
+      borderColors: borderColors == const $CopyWithPlaceholder()
+          ? _value.borderColors
+          // ignore: cast_nullable_to_non_nullable
+          : borderColors as MultiColor?,
+      stroke: stroke == const $CopyWithPlaceholder()
+          ? _value.stroke
+          // ignore: cast_nullable_to_non_nullable
+          : stroke as double?,
+      shadow: shadow == const $CopyWithPlaceholder()
+          ? _value.shadow
+          // ignore: cast_nullable_to_non_nullable
+          : shadow as BoxShadow?,
+    );
+  }
+}
+
+extension $FileSelectionButtonStyleCopyWith on FileSelectionButtonStyle {
+  /// Returns a callable class that can be used as follows: `instanceOfFileSelectionButtonStyle.copyWith(...)` or like so:`instanceOfFileSelectionButtonStyle.copyWith.fieldName(...)`.
+  // ignore: library_private_types_in_public_api
+  _$FileSelectionButtonStyleCWProxy get copyWith =>
+      _$FileSelectionButtonStyleCWProxyImpl(this);
+}

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

@@ -24,7 +24,7 @@ part 'flat_button_component.g.dart';
 abstract class FlatButtonComponent extends ButtonComponent
     with CopyWithMixin<$FlatButtonComponentCWProxy> {
   const FlatButtonComponent({
-    this.mainAxisSize = MainAxisSize.min,
+    this.mainAxisSize,
     this.prefix,
     this.suffix,
     this.label,

packages/wyatt_ui_components/lib/src/domain/entities/buttons/flat_button_component.g.dart

@@ -11,11 +11,11 @@ abstract class $FlatButtonComponentCWProxy {
   FlatButtonComponent prefix(Widget? prefix);
   FlatButtonComponent suffix(Widget? suffix);
   FlatButtonComponent label(TextWrapper? label);
-  FlatButtonComponent disabledStyle(ButtonStyle? disabledStyle);
-  FlatButtonComponent normalStyle(ButtonStyle? normalStyle);
-  FlatButtonComponent hoveredStyle(ButtonStyle? hoveredStyle);
-  FlatButtonComponent focusedStyle(ButtonStyle? focusedStyle);
-  FlatButtonComponent tappedStyle(ButtonStyle? tappedStyle);
+  FlatButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  FlatButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  FlatButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  FlatButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  FlatButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
   FlatButtonComponent onPressed(void Function(ControlState)? onPressed);
   FlatButtonComponent key(Key? key);
   FlatButtonComponent call({
@@ -23,11 +23,11 @@ abstract class $FlatButtonComponentCWProxy {
     Widget? prefix,
     Widget? suffix,
     TextWrapper? label,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   });

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

@@ -14,42 +14,76 @@
 // 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-class FlatButtonStyle extends ButtonStyle {
+part 'flat_button_style.g.dart';
+
+@CopyWith()
+class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
   const FlatButtonStyle({
-    super.radius = 15,
-    super.padding = 10,
+    this.label,
+    super.radius,
+    super.padding,
     super.foregroundColors,
     super.backgroundColors,
     super.borderColors,
-    super.stroke = 2,
-    super.shadow = const BoxShadow(
-      blurRadius: 30,
-      offset: Offset(0, 5),
-      color: Color.fromRGBO(0, 0, 0, 0.05),
-    ),
+    super.stroke,
+    super.shadow,
   });
 
-  @override
-  FlatButtonStyle copyWith({
-    double? radius,
-    double? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  }) =>
-      FlatButtonStyle(
-        radius: radius ?? this.radius,
-        padding: padding ?? this.padding,
-        foregroundColors: foregroundColors ?? this.foregroundColors,
-        backgroundColors: backgroundColors ?? this.backgroundColors,
-        borderColors: borderColors ?? this.borderColors,
-        stroke: stroke ?? this.stroke,
-        shadow: shadow ?? this.shadow,
+  /// Used in negociation to build a style from Flutter default values.
+  factory FlatButtonStyle.fromFlutter(BuildContext context) => FlatButtonStyle(
+        label: context.textTheme.labelLarge,
+        radius: (context.buttonTheme.shape is RoundedRectangleBorder)
+            ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
+            : null,
+        padding: context.buttonTheme.padding,
+        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
+        backgroundColors: MultiColor.single(context.colorScheme.primary),
       );
+
+  /// Used for interpolation.
+  static FlatButtonStyle? lerp(
+    FlatButtonStyle? a,
+    FlatButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      label: TextStyle.lerp(a.label, b.label, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Label text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? label;
 }

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

@@ -0,0 +1,137 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'flat_button_style.dart';
+
+// **************************************************************************
+// CopyWithGenerator
+// **************************************************************************
+
+abstract class _$FlatButtonStyleCWProxy {
+  FlatButtonStyle label(TextStyle? label);
+
+  FlatButtonStyle radius(BorderRadiusGeometry? radius);
+
+  FlatButtonStyle padding(EdgeInsetsGeometry? padding);
+
+  FlatButtonStyle foregroundColors(MultiColor? foregroundColors);
+
+  FlatButtonStyle backgroundColors(MultiColor? backgroundColors);
+
+  FlatButtonStyle borderColors(MultiColor? borderColors);
+
+  FlatButtonStyle stroke(double? stroke);
+
+  FlatButtonStyle shadow(BoxShadow? shadow);
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FlatButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// FlatButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  FlatButtonStyle call({
+    TextStyle? label,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  });
+}
+
+/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfFlatButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfFlatButtonStyle.copyWith.fieldName(...)`
+class _$FlatButtonStyleCWProxyImpl implements _$FlatButtonStyleCWProxy {
+  const _$FlatButtonStyleCWProxyImpl(this._value);
+
+  final FlatButtonStyle _value;
+
+  @override
+  FlatButtonStyle label(TextStyle? label) => this(label: label);
+
+  @override
+  FlatButtonStyle radius(BorderRadiusGeometry? radius) => this(radius: radius);
+
+  @override
+  FlatButtonStyle padding(EdgeInsetsGeometry? padding) =>
+      this(padding: padding);
+
+  @override
+  FlatButtonStyle foregroundColors(MultiColor? foregroundColors) =>
+      this(foregroundColors: foregroundColors);
+
+  @override
+  FlatButtonStyle backgroundColors(MultiColor? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
+
+  @override
+  FlatButtonStyle borderColors(MultiColor? borderColors) =>
+      this(borderColors: borderColors);
+
+  @override
+  FlatButtonStyle stroke(double? stroke) => this(stroke: stroke);
+
+  @override
+  FlatButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
+
+  @override
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `FlatButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// FlatButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  FlatButtonStyle call({
+    Object? label = const $CopyWithPlaceholder(),
+    Object? radius = const $CopyWithPlaceholder(),
+    Object? padding = const $CopyWithPlaceholder(),
+    Object? foregroundColors = const $CopyWithPlaceholder(),
+    Object? backgroundColors = const $CopyWithPlaceholder(),
+    Object? borderColors = const $CopyWithPlaceholder(),
+    Object? stroke = const $CopyWithPlaceholder(),
+    Object? shadow = const $CopyWithPlaceholder(),
+  }) {
+    return FlatButtonStyle(
+      label: label == const $CopyWithPlaceholder()
+          ? _value.label
+          // ignore: cast_nullable_to_non_nullable
+          : label as TextStyle?,
+      radius: radius == const $CopyWithPlaceholder()
+          ? _value.radius
+          // ignore: cast_nullable_to_non_nullable
+          : radius as BorderRadiusGeometry?,
+      padding: padding == const $CopyWithPlaceholder()
+          ? _value.padding
+          // ignore: cast_nullable_to_non_nullable
+          : padding as EdgeInsetsGeometry?,
+      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
+          ? _value.foregroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : foregroundColors as MultiColor?,
+      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
+          ? _value.backgroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : backgroundColors as MultiColor?,
+      borderColors: borderColors == const $CopyWithPlaceholder()
+          ? _value.borderColors
+          // ignore: cast_nullable_to_non_nullable
+          : borderColors as MultiColor?,
+      stroke: stroke == const $CopyWithPlaceholder()
+          ? _value.stroke
+          // ignore: cast_nullable_to_non_nullable
+          : stroke as double?,
+      shadow: shadow == const $CopyWithPlaceholder()
+          ? _value.shadow
+          // ignore: cast_nullable_to_non_nullable
+          : shadow as BoxShadow?,
+    );
+  }
+}
+
+extension $FlatButtonStyleCopyWith on FlatButtonStyle {
+  /// Returns a callable class that can be used as follows: `instanceOfFlatButtonStyle.copyWith(...)` or like so:`instanceOfFlatButtonStyle.copyWith.fieldName(...)`.
+  // ignore: library_private_types_in_public_api
+  _$FlatButtonStyleCWProxy get copyWith => _$FlatButtonStyleCWProxyImpl(this);
+}

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

@@ -16,7 +16,6 @@
 
 import 'package:flutter/widgets.dart';
 import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
-import 'package:wyatt_ui_components/src/domain/entities/buttons/simple_icon_button_style.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 
 part 'simple_icon_button_component.g.dart';
@@ -31,7 +30,6 @@ abstract class SimpleIconButtonComponent extends ButtonComponent
     super.hoveredStyle,
     super.focusedStyle,
     super.tappedStyle,
-    super.selectedStyle,
     super.onPressed,
     super.key,
   });
@@ -51,8 +49,5 @@ abstract class SimpleIconButtonComponent extends ButtonComponent
   @override
   SimpleIconButtonStyle? get tappedStyle;
 
-  @override
-  SimpleIconButtonStyle? get selectedStyle;
-
   final Icon? icon;
 }

packages/wyatt_ui_components/lib/src/domain/entities/buttons/simple_icon_button_component.g.dart

@@ -8,22 +8,20 @@ part of 'simple_icon_button_component.dart';
 
 abstract class $SimpleIconButtonComponentCWProxy {
   SimpleIconButtonComponent icon(Icon? icon);
-  SimpleIconButtonComponent disabledStyle(ButtonStyle? disabledStyle);
-  SimpleIconButtonComponent normalStyle(ButtonStyle? normalStyle);
-  SimpleIconButtonComponent hoveredStyle(ButtonStyle? hoveredStyle);
-  SimpleIconButtonComponent focusedStyle(ButtonStyle? focusedStyle);
-  SimpleIconButtonComponent tappedStyle(ButtonStyle? tappedStyle);
-  SimpleIconButtonComponent selectedStyle(ButtonStyle? selectedStyle);
+  SimpleIconButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  SimpleIconButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  SimpleIconButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  SimpleIconButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  SimpleIconButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
   SimpleIconButtonComponent onPressed(void Function(ControlState)? onPressed);
   SimpleIconButtonComponent key(Key? key);
   SimpleIconButtonComponent call({
     Icon? icon,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   });

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

@@ -14,47 +14,77 @@
 // 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-class SimpleIconButtonStyle extends ButtonStyle {
+part 'simple_icon_button_style.g.dart';
+
+@CopyWith()
+class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
   const SimpleIconButtonStyle({
-    this.dimension = 30,
-    super.radius = 5,
-    super.padding = 5,
+    this.dimension,
+    super.radius,
+    super.padding,
     super.foregroundColors,
     super.backgroundColors,
     super.borderColors,
-    super.stroke = 2,
-    super.shadow = const BoxShadow(
-      blurRadius: 30,
-      offset: Offset(0, 5),
-      color: Color.fromRGBO(0, 0, 0, 0.05),
-    ),
+    super.stroke,
+    super.shadow,
   });
 
-  final double? dimension;
-
-  @override
-  SimpleIconButtonStyle copyWith({
-    double? dimension,
-    double? radius,
-    double? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  }) =>
+  /// Used in negociation to build a style from Flutter default values.
+  factory SimpleIconButtonStyle.fromFlutter(BuildContext context) =>
       SimpleIconButtonStyle(
-        dimension: dimension ?? this.dimension,
-        radius: radius ?? radius,
-        padding: padding ?? padding,
-        foregroundColors: foregroundColors ?? foregroundColors,
-        backgroundColors: backgroundColors ?? backgroundColors,
-        borderColors: borderColors ?? borderColors,
-        stroke: stroke ?? stroke,
-        shadow: shadow ?? shadow,
+        dimension: context.buttonTheme.height,
+        radius: (context.buttonTheme.shape is RoundedRectangleBorder)
+            ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
+            : null,
+        padding: context.buttonTheme.padding,
+        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
+        backgroundColors: MultiColor.single(context.colorScheme.primary),
       );
+
+  /// Used for interpolation.
+  static SimpleIconButtonStyle? lerp(
+    SimpleIconButtonStyle? a,
+    SimpleIconButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      dimension: lerpDouble(a.dimension, b.dimension, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Dimension of this button (as a square)
+  ///
+  /// Default to `context.buttonTheme.height`
+  final double? dimension;
 }

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

@@ -0,0 +1,141 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'simple_icon_button_style.dart';
+
+// **************************************************************************
+// CopyWithGenerator
+// **************************************************************************
+
+abstract class _$SimpleIconButtonStyleCWProxy {
+  SimpleIconButtonStyle dimension(double? dimension);
+
+  SimpleIconButtonStyle radius(BorderRadiusGeometry? radius);
+
+  SimpleIconButtonStyle padding(EdgeInsetsGeometry? padding);
+
+  SimpleIconButtonStyle foregroundColors(MultiColor? foregroundColors);
+
+  SimpleIconButtonStyle backgroundColors(MultiColor? backgroundColors);
+
+  SimpleIconButtonStyle borderColors(MultiColor? borderColors);
+
+  SimpleIconButtonStyle stroke(double? stroke);
+
+  SimpleIconButtonStyle shadow(BoxShadow? shadow);
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SimpleIconButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// SimpleIconButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  SimpleIconButtonStyle call({
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  });
+}
+
+/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfSimpleIconButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfSimpleIconButtonStyle.copyWith.fieldName(...)`
+class _$SimpleIconButtonStyleCWProxyImpl
+    implements _$SimpleIconButtonStyleCWProxy {
+  const _$SimpleIconButtonStyleCWProxyImpl(this._value);
+
+  final SimpleIconButtonStyle _value;
+
+  @override
+  SimpleIconButtonStyle dimension(double? dimension) =>
+      this(dimension: dimension);
+
+  @override
+  SimpleIconButtonStyle radius(BorderRadiusGeometry? radius) =>
+      this(radius: radius);
+
+  @override
+  SimpleIconButtonStyle padding(EdgeInsetsGeometry? padding) =>
+      this(padding: padding);
+
+  @override
+  SimpleIconButtonStyle foregroundColors(MultiColor? foregroundColors) =>
+      this(foregroundColors: foregroundColors);
+
+  @override
+  SimpleIconButtonStyle backgroundColors(MultiColor? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
+
+  @override
+  SimpleIconButtonStyle borderColors(MultiColor? borderColors) =>
+      this(borderColors: borderColors);
+
+  @override
+  SimpleIconButtonStyle stroke(double? stroke) => this(stroke: stroke);
+
+  @override
+  SimpleIconButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
+
+  @override
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SimpleIconButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// SimpleIconButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  SimpleIconButtonStyle call({
+    Object? dimension = const $CopyWithPlaceholder(),
+    Object? radius = const $CopyWithPlaceholder(),
+    Object? padding = const $CopyWithPlaceholder(),
+    Object? foregroundColors = const $CopyWithPlaceholder(),
+    Object? backgroundColors = const $CopyWithPlaceholder(),
+    Object? borderColors = const $CopyWithPlaceholder(),
+    Object? stroke = const $CopyWithPlaceholder(),
+    Object? shadow = const $CopyWithPlaceholder(),
+  }) {
+    return SimpleIconButtonStyle(
+      dimension: dimension == const $CopyWithPlaceholder()
+          ? _value.dimension
+          // ignore: cast_nullable_to_non_nullable
+          : dimension as double?,
+      radius: radius == const $CopyWithPlaceholder()
+          ? _value.radius
+          // ignore: cast_nullable_to_non_nullable
+          : radius as BorderRadiusGeometry?,
+      padding: padding == const $CopyWithPlaceholder()
+          ? _value.padding
+          // ignore: cast_nullable_to_non_nullable
+          : padding as EdgeInsetsGeometry?,
+      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
+          ? _value.foregroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : foregroundColors as MultiColor?,
+      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
+          ? _value.backgroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : backgroundColors as MultiColor?,
+      borderColors: borderColors == const $CopyWithPlaceholder()
+          ? _value.borderColors
+          // ignore: cast_nullable_to_non_nullable
+          : borderColors as MultiColor?,
+      stroke: stroke == const $CopyWithPlaceholder()
+          ? _value.stroke
+          // ignore: cast_nullable_to_non_nullable
+          : stroke as double?,
+      shadow: shadow == const $CopyWithPlaceholder()
+          ? _value.shadow
+          // ignore: cast_nullable_to_non_nullable
+          : shadow as BoxShadow?,
+    );
+  }
+}
+
+extension $SimpleIconButtonStyleCopyWith on SimpleIconButtonStyle {
+  /// Returns a callable class that can be used as follows: `instanceOfSimpleIconButtonStyle.copyWith(...)` or like so:`instanceOfSimpleIconButtonStyle.copyWith.fieldName(...)`.
+  // ignore: library_private_types_in_public_api
+  _$SimpleIconButtonStyleCWProxy get copyWith =>
+      _$SimpleIconButtonStyleCWProxyImpl(this);
+}

packages/wyatt_ui_components/lib/src/domain/entities/buttons/symbol_button_component.g.dart

@@ -10,24 +10,24 @@ abstract class $SymbolButtonComponentCWProxy {
   SymbolButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
   SymbolButtonComponent label(TextWrapper? label);
   SymbolButtonComponent icon(Widget? icon);
-  SymbolButtonComponent disabledStyle(ButtonStyle? disabledStyle);
-  SymbolButtonComponent normalStyle(ButtonStyle? normalStyle);
-  SymbolButtonComponent hoveredStyle(ButtonStyle? hoveredStyle);
-  SymbolButtonComponent focusedStyle(ButtonStyle? focusedStyle);
-  SymbolButtonComponent tappedStyle(ButtonStyle? tappedStyle);
-  SymbolButtonComponent selectedStyle(ButtonStyle? selectedStyle);
+  SymbolButtonComponent disabledStyle(ButtonStyle<dynamic>? disabledStyle);
+  SymbolButtonComponent normalStyle(ButtonStyle<dynamic>? normalStyle);
+  SymbolButtonComponent hoveredStyle(ButtonStyle<dynamic>? hoveredStyle);
+  SymbolButtonComponent focusedStyle(ButtonStyle<dynamic>? focusedStyle);
+  SymbolButtonComponent tappedStyle(ButtonStyle<dynamic>? tappedStyle);
+  SymbolButtonComponent selectedStyle(ButtonStyle<dynamic>? selectedStyle);
   SymbolButtonComponent onPressed(void Function(ControlState)? onPressed);
   SymbolButtonComponent key(Key? key);
   SymbolButtonComponent call({
     MainAxisSize? mainAxisSize,
     TextWrapper? label,
     Widget? icon,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   });

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

@@ -14,47 +14,85 @@
 // 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
 import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
 import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
 import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
 
-class SymbolButtonStyle extends ButtonStyle {
+part 'symbol_button_style.g.dart';
+
+@CopyWith()
+class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
   const SymbolButtonStyle({
-    this.dimension = 60,
-    super.radius = 15,
-    super.padding = 10,
+    this.label,
+    this.dimension,
+    super.radius,
+    super.padding,
     super.foregroundColors,
     super.backgroundColors,
     super.borderColors,
-    super.stroke = 2,
-    super.shadow = const BoxShadow(
-      blurRadius: 30,
-      offset: Offset(0, 5),
-      color: Color.fromRGBO(0, 0, 0, 0.05),
-    ),
+    super.stroke,
+    super.shadow,
   });
 
-  final double? dimension;
-
-  @override
-  SymbolButtonStyle copyWith({
-    double? dimension,
-    double? radius,
-    double? padding,
-    MultiColor? foregroundColors,
-    MultiColor? backgroundColors,
-    MultiColor? borderColors,
-    double? stroke,
-    BoxShadow? shadow,
-  }) =>
+  /// Used in negociation to build a style from Flutter default values.
+  factory SymbolButtonStyle.fromFlutter(BuildContext context) =>
       SymbolButtonStyle(
-        dimension: dimension ?? this.dimension,
-        radius: radius ?? this.radius,
-        padding: padding ?? this.padding,
-        foregroundColors: foregroundColors ?? this.foregroundColors,
-        backgroundColors: backgroundColors ?? this.backgroundColors,
-        borderColors: borderColors ?? this.borderColors,
-        stroke: stroke ?? this.stroke,
-        shadow: shadow ?? this.shadow,
+        label: context.textTheme.labelLarge,
+        dimension: context.buttonTheme.height,
+        radius: (context.buttonTheme.shape is RoundedRectangleBorder)
+            ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
+            : null,
+        padding: context.buttonTheme.padding,
+        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
+        backgroundColors: MultiColor.single(context.colorScheme.primary),
       );
+
+  /// Used for interpolation.
+  static SymbolButtonStyle? lerp(
+    SymbolButtonStyle? a,
+    SymbolButtonStyle? b,
+    double t,
+  ) {
+    if (a == null || b == null) {
+      return null;
+    }
+    // b.copyWith to return b attributes even if they are not lerped
+    return b.copyWith(
+      label: TextStyle.lerp(a.label, b.label, t),
+      dimension: lerpDouble(a.dimension, b.dimension, t),
+      foregroundColors: MultiColor.lerp(
+        a.foregroundColors,
+        b.foregroundColors,
+        t,
+      ),
+      backgroundColors: MultiColor.lerp(
+        a.backgroundColors,
+        b.backgroundColors,
+        t,
+      ),
+      borderColors: MultiColor.lerp(
+        a.borderColors,
+        b.borderColors,
+        t,
+      ),
+      radius: BorderRadiusGeometry.lerp(a.radius, b.radius, t),
+      padding: EdgeInsetsGeometry.lerp(a.padding, b.padding, t),
+      stroke: lerpDouble(a.stroke, b.stroke, t),
+      shadow: BoxShadow.lerp(a.shadow, b.shadow, t),
+    );
+  }
+
+  /// Label text style
+  ///
+  /// Default to `TextTheme.labelLarge`
+  final TextStyle? label;
+
+  /// Dimension of this button (as a square)
+  ///
+  /// Default to `context.buttonTheme.height`
+  final double? dimension;
 }

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

@@ -0,0 +1,150 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'symbol_button_style.dart';
+
+// **************************************************************************
+// CopyWithGenerator
+// **************************************************************************
+
+abstract class _$SymbolButtonStyleCWProxy {
+  SymbolButtonStyle label(TextStyle? label);
+
+  SymbolButtonStyle dimension(double? dimension);
+
+  SymbolButtonStyle radius(BorderRadiusGeometry? radius);
+
+  SymbolButtonStyle padding(EdgeInsetsGeometry? padding);
+
+  SymbolButtonStyle foregroundColors(MultiColor? foregroundColors);
+
+  SymbolButtonStyle backgroundColors(MultiColor? backgroundColors);
+
+  SymbolButtonStyle borderColors(MultiColor? borderColors);
+
+  SymbolButtonStyle stroke(double? stroke);
+
+  SymbolButtonStyle shadow(BoxShadow? shadow);
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SymbolButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// SymbolButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  SymbolButtonStyle call({
+    TextStyle? label,
+    double? dimension,
+    BorderRadiusGeometry? radius,
+    EdgeInsetsGeometry? padding,
+    MultiColor? foregroundColors,
+    MultiColor? backgroundColors,
+    MultiColor? borderColors,
+    double? stroke,
+    BoxShadow? shadow,
+  });
+}
+
+/// Proxy class for `copyWith` functionality. This is a callable class and can be used as follows: `instanceOfSymbolButtonStyle.copyWith(...)`. Additionally contains functions for specific fields e.g. `instanceOfSymbolButtonStyle.copyWith.fieldName(...)`
+class _$SymbolButtonStyleCWProxyImpl implements _$SymbolButtonStyleCWProxy {
+  const _$SymbolButtonStyleCWProxyImpl(this._value);
+
+  final SymbolButtonStyle _value;
+
+  @override
+  SymbolButtonStyle label(TextStyle? label) => this(label: label);
+
+  @override
+  SymbolButtonStyle dimension(double? dimension) => this(dimension: dimension);
+
+  @override
+  SymbolButtonStyle radius(BorderRadiusGeometry? radius) =>
+      this(radius: radius);
+
+  @override
+  SymbolButtonStyle padding(EdgeInsetsGeometry? padding) =>
+      this(padding: padding);
+
+  @override
+  SymbolButtonStyle foregroundColors(MultiColor? foregroundColors) =>
+      this(foregroundColors: foregroundColors);
+
+  @override
+  SymbolButtonStyle backgroundColors(MultiColor? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
+
+  @override
+  SymbolButtonStyle borderColors(MultiColor? borderColors) =>
+      this(borderColors: borderColors);
+
+  @override
+  SymbolButtonStyle stroke(double? stroke) => this(stroke: stroke);
+
+  @override
+  SymbolButtonStyle shadow(BoxShadow? shadow) => this(shadow: shadow);
+
+  @override
+
+  /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `SymbolButtonStyle(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
+  ///
+  /// Usage
+  /// ```dart
+  /// SymbolButtonStyle(...).copyWith(id: 12, name: "My name")
+  /// ````
+  SymbolButtonStyle call({
+    Object? label = const $CopyWithPlaceholder(),
+    Object? dimension = const $CopyWithPlaceholder(),
+    Object? radius = const $CopyWithPlaceholder(),
+    Object? padding = const $CopyWithPlaceholder(),
+    Object? foregroundColors = const $CopyWithPlaceholder(),
+    Object? backgroundColors = const $CopyWithPlaceholder(),
+    Object? borderColors = const $CopyWithPlaceholder(),
+    Object? stroke = const $CopyWithPlaceholder(),
+    Object? shadow = const $CopyWithPlaceholder(),
+  }) {
+    return SymbolButtonStyle(
+      label: label == const $CopyWithPlaceholder()
+          ? _value.label
+          // ignore: cast_nullable_to_non_nullable
+          : label as TextStyle?,
+      dimension: dimension == const $CopyWithPlaceholder()
+          ? _value.dimension
+          // ignore: cast_nullable_to_non_nullable
+          : dimension as double?,
+      radius: radius == const $CopyWithPlaceholder()
+          ? _value.radius
+          // ignore: cast_nullable_to_non_nullable
+          : radius as BorderRadiusGeometry?,
+      padding: padding == const $CopyWithPlaceholder()
+          ? _value.padding
+          // ignore: cast_nullable_to_non_nullable
+          : padding as EdgeInsetsGeometry?,
+      foregroundColors: foregroundColors == const $CopyWithPlaceholder()
+          ? _value.foregroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : foregroundColors as MultiColor?,
+      backgroundColors: backgroundColors == const $CopyWithPlaceholder()
+          ? _value.backgroundColors
+          // ignore: cast_nullable_to_non_nullable
+          : backgroundColors as MultiColor?,
+      borderColors: borderColors == const $CopyWithPlaceholder()
+          ? _value.borderColors
+          // ignore: cast_nullable_to_non_nullable
+          : borderColors as MultiColor?,
+      stroke: stroke == const $CopyWithPlaceholder()
+          ? _value.stroke
+          // ignore: cast_nullable_to_non_nullable
+          : stroke as double?,
+      shadow: shadow == const $CopyWithPlaceholder()
+          ? _value.shadow
+          // ignore: cast_nullable_to_non_nullable
+          : shadow as BoxShadow?,
+    );
+  }
+}
+
+extension $SymbolButtonStyleCopyWith on SymbolButtonStyle {
+  /// Returns a callable class that can be used as follows: `instanceOfSymbolButtonStyle.copyWith(...)` or like so:`instanceOfSymbolButtonStyle.copyWith.fieldName(...)`.
+  // ignore: library_private_types_in_public_api
+  _$SymbolButtonStyleCWProxy get copyWith =>
+      _$SymbolButtonStyleCWProxyImpl(this);
+}

packages/wyatt_ui_components/lib/src/domain/entities/cards/skill_card_component.g.dart

@@ -13,6 +13,8 @@ abstract class $SkillCardComponentCWProxy {
   SkillCardComponent description(TextWrapper? description);
   SkillCardComponent skills(List<TextWrapper>? skills);
   SkillCardComponent leadingIcon(IconData? leadingIcon);
+  SkillCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   SkillCardComponent radius(double? radius);
   SkillCardComponent padding(double? padding);
   SkillCardComponent borderColors(List<Color>? borderColors);
@@ -21,8 +23,6 @@ abstract class $SkillCardComponentCWProxy {
   SkillCardComponent maxSize(Size? maxSize);
   SkillCardComponent shadow(BoxShadow? shadow);
   SkillCardComponent background(Widget? background);
-  SkillCardComponent secondaryBackgroundColors(
-      Color? secondaryBackgroundColors);
   SkillCardComponent key(Key? key);
   SkillCardComponent call({
     IconData? icon,
@@ -31,6 +31,7 @@ abstract class $SkillCardComponentCWProxy {
     TextWrapper? description,
     List<TextWrapper>? skills,
     IconData? leadingIcon,
+    Color? secondaryBackgroundColors,
     double? radius,
     double? padding,
     List<Color>? borderColors,
@@ -39,7 +40,6 @@ abstract class $SkillCardComponentCWProxy {
     Size? maxSize,
     BoxShadow? shadow,
     Widget? background,
-    Color? secondaryBackgroundColors,
     Key? key,
   });
 }

packages/wyatt_ui_components/pubspec.yaml

@@ -9,25 +9,21 @@ environment:
   sdk: ">=2.17.0 <3.0.0"
 
 dependencies:
-  flutter:
-    sdk: flutter
+  copy_with_extension: ^5.0.0
+  flutter: { sdk: flutter }
   wyatt_component_copy_with_extension:
     git:
       url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git
       path: packages/wyatt_component_copy_with_extension
 
 dev_dependencies:
-  flutter_test:
-    sdk: flutter
-
   build_runner: ^2.3.3
+  copy_with_extension_gen: ^5.0.0
+  flutter_test: { sdk: flutter }
+  wyatt_analysis:
+    hosted: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub
+    version: ^2.4.0
   wyatt_component_copy_with_gen:
     git:
       url: ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-packages.git
       path: packages/wyatt_component_copy_with_gen
-
-  wyatt_analysis:
-    git:
-      url: https://git.wyatt-studio.fr/Wyatt-FOSS/wyatt-packages
-      ref: wyatt_analysis-v2.4.0
-      path: packages/wyatt_analysis

packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button.g.dart

@@ -21,25 +21,25 @@ class $FileSelectionButtonCWProxyImpl
   FileSelectionButton subTitle(TextWrapper? subTitle) =>
       this(subTitle: subTitle);
   @override
-  FileSelectionButton disabledStyle(ButtonStyle? disabledStyle) =>
+  FileSelectionButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
       this(disabledStyle: disabledStyle);
   @override
-  FileSelectionButton normalStyle(ButtonStyle? normalStyle) =>
+  FileSelectionButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
       this(normalStyle: normalStyle);
   @override
-  FileSelectionButton hoveredStyle(ButtonStyle? hoveredStyle) =>
+  FileSelectionButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
       this(hoveredStyle: hoveredStyle);
   @override
-  FileSelectionButton focusedStyle(ButtonStyle? focusedStyle) =>
+  FileSelectionButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
       this(focusedStyle: focusedStyle);
   @override
-  FileSelectionButton tappedStyle(ButtonStyle? tappedStyle) =>
+  FileSelectionButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
       this(tappedStyle: tappedStyle);
   @override
-  FileSelectionButton selectedStyle(ButtonStyle? selectedStyle) =>
+  FileSelectionButton selectedStyle(ButtonStyle<dynamic>? selectedStyle) =>
       this(selectedStyle: selectedStyle);
   @override
-  FileSelectionButton invalidStyle(ButtonStyle? invalidStyle) =>
+  FileSelectionButton invalidStyle(ButtonStyle<dynamic>? invalidStyle) =>
       this(invalidStyle: invalidStyle);
   @override
   FileSelectionButton onPressed(void Function(ControlState)? onPressed) =>
@@ -52,13 +52,13 @@ class $FileSelectionButtonCWProxyImpl
     Widget? leading,
     TextWrapper? title,
     TextWrapper? subTitle,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
-    ButtonStyle? invalidStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
+    ButtonStyle<dynamic>? invalidStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   }) =>

packages/wyatt_ui_kit/lib/src/components/buttons/file_selection_button/file_selection_button_screen.dart

@@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit/src/components/buttons/cubit/invalid_button_cubit.d
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
 import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
 import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/domain/button_theme_extension/file_selection_button_theme_extension.dart';
 
 class FileSelectionButtonScreen
     extends CubitScreen<InvalidButtonCubit, ButtonState> {
@@ -47,6 +48,7 @@ class FileSelectionButtonScreen
   final Widget? leading;
   final TextWrapper? title;
   final TextWrapper? subTitle;
+  final MainAxisSize? mainAxisSize;
 
   final FileSelectionButtonStyle? disabledStyle;
   final FileSelectionButtonStyle? normalStyle;
@@ -58,44 +60,164 @@ class FileSelectionButtonScreen
 
   final void Function(ControlState state)? onPressed;
 
-  final MainAxisSize? mainAxisSize;
-
   @override
   InvalidButtonCubit create(BuildContext context) => InvalidButtonCubit();
 
-  @override
-  Widget onBuild(BuildContext context, ButtonState state) {
-    // Set a default style
-    FileSelectionButtonStyle? style =
-        normalStyle ?? const FileSelectionButtonStyle();
+  /// Negotiate the theme to get a complete style.
+  FileSelectionButtonStyle negotiate(BuildContext context, ButtonState state) {
+    // Define default style from Flutter values.
+    FileSelectionButtonStyle style =
+        FileSelectionButtonStyle.fromFlutter(context);
+
+    // Try to retrieve custom theme extension
+    final fileSelectionButtonThemeExtension =
+        context.themeExtension<FileSelectionButtonThemeExtension>();
 
     switch (state.state) {
       case ControlState.disabled:
-        style = disabledStyle ?? style;
+        style = disabledStyle ??
+            fileSelectionButtonThemeExtension?.disabledStyle ??
+            style.copyWith(
+              foregroundColors:
+                  MultiColor.single(context.colorScheme.onSurface),
+              backgroundColors: MultiColor.single(context.colorScheme.surface),
+            );
         break;
       case ControlState.hovered:
-        style = hoveredStyle ?? style;
+        style = hoveredStyle ??
+            fileSelectionButtonThemeExtension?.hoveredStyle ??
+            style;
         break;
       case ControlState.tapped:
-        style = tappedStyle ?? style;
+        style = tappedStyle ??
+            fileSelectionButtonThemeExtension?.tappedStyle ??
+            style;
         break;
       case ControlState.focused:
-        style = focusedStyle ?? style;
+        style = focusedStyle ??
+            fileSelectionButtonThemeExtension?.focusedStyle ??
+            style;
         break;
       case ControlState.normal:
-        // already done
+        style = normalStyle ??
+            fileSelectionButtonThemeExtension?.normalStyle ??
+            style;
         break;
     }
 
+    // Apply extra theme
     if (state.isSelected) {
-      style = selectedStyle ?? style;
+      // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
+      style = style.copyWith(
+        title: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .title,
+        subTitle: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .subTitle,
+        radius: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .radius,
+        padding: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .padding,
+        foregroundColors: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .foregroundColors,
+        backgroundColors: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .backgroundColors,
+        borderColors: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .borderColors,
+        stroke: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .stroke,
+        shadow: (selectedStyle ??
+                fileSelectionButtonThemeExtension?.selectedStyle ??
+                style)
+            .shadow,
+      );
     }
 
     if (state.isInvalid) {
-      style = invalidStyle ?? style;
+      // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
+      style = style.copyWith(
+        title: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .title,
+        subTitle: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .subTitle,
+        radius: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .radius,
+        padding: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .padding,
+        foregroundColors: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .foregroundColors,
+        backgroundColors: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .backgroundColors,
+        borderColors: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .borderColors,
+        stroke: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .stroke,
+        shadow: (invalidStyle ??
+                fileSelectionButtonThemeExtension?.invalidStyle ??
+                style)
+            .shadow,
+      );
     }
 
-    print(state);
+    return style;
+  }
+
+  Widget _border(
+    BuildContext context,
+    FileSelectionButtonStyle style,
+    Widget child,
+  ) {
+    if (style.borderColors != null && style.stroke != null) {
+      return DottedBorder(
+        padding: EdgeInsets.zero,
+        dashPattern: const [5, 5],
+        strokeWidth: style.stroke!,
+        color: style.borderColors!.color,
+        borderType: BorderType.RRect,
+        radius:
+            style.radius?.resolve(TextDirection.ltr).bottomLeft ?? Radius.zero,
+        strokeCap: StrokeCap.square,
+        child: child,
+      );
+    } else {
+      return child;
+    }
+  }
+
+  @override
+  Widget onBuild(BuildContext context, ButtonState state) {
+    final style = negotiate(context, state);
 
     return Focus(
       onFocusChange: (hasFocus) =>
@@ -128,18 +250,12 @@ class FileSelectionButtonScreen
             onPressed?.call(state.state);
             bloc(context).onClickUpOut();
           },
-          child: DottedBorder(
-            padding: EdgeInsets.zero,
-            dashPattern: const [5, 5],
-            strokeWidth: style.stroke ?? 3,
-            color: style.borderColors?.color ?? context.colorScheme.primary,
-            borderType: BorderType.RRect,
-            radius: Radius.circular(style.radius ?? 0),
-            strokeCap: StrokeCap.square,
-            child: DecoratedBox(
+          child: _border(
+            context,
+            style,
+            DecoratedBox(
               decoration: BoxDecoration(
-                color: style.backgroundColors?.color ??
-                    context.colorScheme.primary,
+                color: style.backgroundColors?.color,
                 // if no gradient colors => no default value
                 gradient: (style.backgroundColors?.isGradient ?? false)
                     ? LinearGradient(
@@ -149,9 +265,7 @@ class FileSelectionButtonScreen
                 boxShadow: [
                   if (style.shadow != null) ...[style.shadow!]
                 ],
-                borderRadius: BorderRadius.all(
-                  Radius.circular(style.radius ?? 0),
-                ),
+                borderRadius: style.radius,
               ),
               child: ConstrainedBox(
                 constraints: const BoxConstraints(
@@ -159,81 +273,70 @@ class FileSelectionButtonScreen
                   minHeight: 50,
                 ), // min sizes for Material buttons
                 child: Padding(
-                  padding: EdgeInsets.all(style.padding ?? 0),
+                  padding: style.padding ?? EdgeInsets.zero,
                   child: Row(
                     mainAxisSize: mainAxisSize ?? MainAxisSize.min,
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
                       if (leading != null) ...[
                         leading ?? const SizedBox.shrink(),
-                        Gap(style.padding ?? 10),
+                        Gap(style.padding?.horizontal ?? 10),
                       ],
-
-                      // Choose color
-                      // label.style.color ??
-                      //  buttonStyle.foregroundColor.color ??
-                      //    context.textTheme.titleLarge.color
-                      //
-                      // Choose gradient
-                      // label.gradient ??
-                      //  buttonStyle.foregroundColor.colors ??
-                      //    null
                       Column(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
+                          /// Choose color
+                          /// title.style.color ??
+                          ///  buttonStyle.title.style.color ??
+                          ///    context.textTheme.titleLarge.color
+                          ///
+                          /// Choose gradient
+                          /// title.gradient ??
+                          ///  buttonStyle.foregroundColor.colors ??
+                          ///    null
+                          ///
+                          /// More infos in `negociate()` method
                           if (title != null) ...[
-                            Builder(
-                              builder: (context) {
-                                final color = title?.style?.color ??
-                                    style?.foregroundColors?.color ??
-                                    context.textTheme.titleLarge?.color;
-                                final buttonStyleGradient =
-                                    (style?.foregroundColors?.isGradient ??
-                                            false)
-                                        ? style?.foregroundColors?.colors
-                                        : null;
-                                final gradient =
-                                    title?.gradient ?? buttonStyleGradient;
-
-                                return Text(
+                            Gap(style.padding?.horizontal ?? 10),
+                            Text(
                               title!.text,
-                                  style: (title!.style ??
-                                          context.textTheme.titleLarge)
-                                      ?.copyWith(color: color),
+                              style: title!.style ?? style.title,
                             ).toGradient(
                               LinearGradientHelper.fromNullableColors(
-                                    gradient,
+                                title?.gradient ??
+                                    ((style.foregroundColors?.isGradient ??
+                                            false)
+                                        ? style.foregroundColors?.colors
+                                        : null),
                               ),
-                                );
-                              },
                             ),
                           ],
-                          if (subTitle != null) ...[
-                            Builder(
-                              builder: (context) {
-                                final color = subTitle?.style?.color ??
-                                    style?.foregroundColors?.color ??
-                                    context.textTheme.bodyMedium?.color;
-                                final buttonStyleGradient =
-                                    (style?.foregroundColors?.isGradient ??
-                                            false)
-                                        ? style?.foregroundColors?.colors
-                                        : null;
-                                final gradient =
-                                    subTitle?.gradient ?? buttonStyleGradient;
 
-                                return Text(
+                          /// Choose color
+                          /// subTitle.style.color ??
+                          ///  buttonStyle.subTitle.style.color ??
+                          ///    context.textTheme.subTitleLarge.color
+                          ///
+                          /// Choose gradient
+                          /// subTitle.gradient ??
+                          ///  buttonStyle.foregroundColor.colors ??
+                          ///    null
+                          ///
+                          /// More infos in `negociate()` method
+                          if (subTitle != null) ...[
+                            Gap(style.padding?.horizontal ?? 10),
+                            Text(
                               subTitle!.text,
-                                  style: (subTitle!.style ??
-                                          context.textTheme.bodyMedium)
-                                      ?.copyWith(color: color),
+                              style: subTitle!.style ?? style.subTitle,
                             ).toGradient(
                               LinearGradientHelper.fromNullableColors(
-                                    gradient,
+                                subTitle?.gradient ??
+                                    ((style.foregroundColors?.isGradient ??
+                                            false)
+                                        ? style.foregroundColors?.colors
+                                        : null),
                               ),
-                                );
-                              },
                             ),
                           ],
                         ],

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

@@ -19,19 +19,19 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
   @override
   FlatButton label(TextWrapper? label) => this(label: label);
   @override
-  FlatButton disabledStyle(ButtonStyle? disabledStyle) =>
+  FlatButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
       this(disabledStyle: disabledStyle);
   @override
-  FlatButton normalStyle(ButtonStyle? normalStyle) =>
+  FlatButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
       this(normalStyle: normalStyle);
   @override
-  FlatButton hoveredStyle(ButtonStyle? hoveredStyle) =>
+  FlatButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
       this(hoveredStyle: hoveredStyle);
   @override
-  FlatButton focusedStyle(ButtonStyle? focusedStyle) =>
+  FlatButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
       this(focusedStyle: focusedStyle);
   @override
-  FlatButton tappedStyle(ButtonStyle? tappedStyle) =>
+  FlatButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
       this(tappedStyle: tappedStyle);
   @override
   FlatButton onPressed(void Function(ControlState)? onPressed) =>
@@ -44,11 +44,11 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
     Widget? prefix,
     Widget? suffix,
     TextWrapper? label,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   }) =>

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

@@ -24,6 +24,7 @@ import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
 import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
 import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/domain/button_theme_extension/flat_button_theme_extension.dart';
 
 class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
   const FlatButtonScreen({
@@ -43,6 +44,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
   final Widget? prefix;
   final Widget? suffix;
   final TextWrapper? label;
+  final MainAxisSize? mainAxisSize;
 
   final FlatButtonStyle? disabledStyle;
   final FlatButtonStyle? normalStyle;
@@ -52,34 +54,49 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
 
   final void Function(ControlState state)? onPressed;
 
-  final MainAxisSize? mainAxisSize;
-
   @override
   ButtonCubit create(BuildContext context) => ButtonCubit();
 
-  @override
-  Widget onBuild(BuildContext context, ButtonState state) {
-    // Set a default style
-    FlatButtonStyle? style = normalStyle ?? const FlatButtonStyle();
+  /// Negotiate the theme to get a complete style.
+  FlatButtonStyle negotiate(BuildContext context, ControlState state) {
+    // Define default style from Flutter values.
+    FlatButtonStyle style = FlatButtonStyle.fromFlutter(context);
 
-    switch (state.state) {
+    // Try to retrieve custom theme extension
+    final flatButtonThemeExtension =
+        context.themeExtension<FlatButtonThemeExtension>();
+
+    switch (state) {
       case ControlState.disabled:
-        style = disabledStyle ?? style;
+        style = disabledStyle ??
+            flatButtonThemeExtension?.disabledStyle ??
+            style.copyWith(
+              foregroundColors:
+                  MultiColor.single(context.colorScheme.onSurface),
+              backgroundColors: MultiColor.single(context.colorScheme.surface),
+            );
         break;
       case ControlState.hovered:
-        style = hoveredStyle ?? style;
+        style = hoveredStyle ?? flatButtonThemeExtension?.hoveredStyle ?? style;
         break;
       case ControlState.tapped:
-        style = tappedStyle ?? style;
+        style = tappedStyle ?? flatButtonThemeExtension?.tappedStyle ?? style;
         break;
       case ControlState.focused:
-        style = focusedStyle ?? style;
+        style = focusedStyle ?? flatButtonThemeExtension?.focusedStyle ?? style;
         break;
       case ControlState.normal:
-        // already done
+        style = normalStyle ?? flatButtonThemeExtension?.normalStyle ?? style;
         break;
     }
 
+    return style;
+  }
+
+  @override
+  Widget onBuild(BuildContext context, ButtonState state) {
+    final style = negotiate(context, state.state);
+
     return Focus(
       onFocusChange: (hasFocus) =>
           hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@@ -113,20 +130,19 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
           },
           child: DecoratedBox(
             decoration: BoxDecoration(
-              color: style.backgroundColors?.color ??
-                  context.colorScheme.primary,
+              color: style.backgroundColors?.color,
               // If no border color => no default value
-              border: (style.borderColors != null)
+              border: (style.borderColors != null && style.stroke != null)
                   ? (style.borderColors?.isGradient ?? false)
                       ? GradientBoxBorder(
                           gradient: LinearGradient(
                             colors: style.borderColors!.colors,
                           ),
-                          width: style.stroke ?? 2,
+                          width: style.stroke!,
                         )
                       : Border.all(
                           color: style.borderColors!.color,
-                          width: style.stroke ?? 2,
+                          width: style.stroke!,
                         )
                   : null,
               // if no gradient colors => no default value
@@ -138,9 +154,7 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
               boxShadow: [
                 if (style.shadow != null) ...[style.shadow!]
               ],
-              borderRadius: BorderRadius.all(
-                Radius.circular(style.radius ?? 0),
-              ),
+              borderRadius: style.radius,
             ),
             child: ConstrainedBox(
               constraints: const BoxConstraints(
@@ -148,76 +162,62 @@ class FlatButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
                 minHeight: 36,
               ), // min sizes for Material buttons
               child: Padding(
-                padding: EdgeInsets.all(style.padding ?? 0),
+                padding: style.padding ?? EdgeInsets.zero,
                 child: Row(
                   mainAxisSize: mainAxisSize ?? MainAxisSize.min,
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
-                    Builder(
-                      builder: (context) {
-                        final color = style?.foregroundColors?.color;
-                        if (color != null) {
-                          return ColorFiltered(
-                            colorFilter:
-                                ColorFilter.mode(color, BlendMode.srcIn),
-                            child: prefix ?? const SizedBox.shrink(),
-                          );
-                        } else {
-                          return prefix ?? const SizedBox.shrink();
-                        }
-                      },
+                    if (style.foregroundColors?.color != null &&
+                        prefix != null) ...[
+                      ColorFiltered(
+                        colorFilter: ColorFilter.mode(
+                          style.foregroundColors!.color,
+                          BlendMode.srcIn,
                         ),
-                    Gap(style.padding ?? 10),
-                    // Choose color
-                    // label.style.color ??
-                    //  buttonStyle.foregroundColor.color ??
-                    //    context.textTheme.titleLarge.color
-                    //
-                    // Choose gradient
-                    // label.gradient ??
-                    //  buttonStyle.foregroundColor.colors ??
-                    //    null
-                    if (label != null) ...[
-                      Builder(
-                        builder: (context) {
-                          final color = label?.style?.color ??
-                              style?.foregroundColors?.color ??
-                              context.textTheme.titleLarge?.color;
-                          final buttonStyleGradient =
-                              (style?.foregroundColors?.isGradient ?? false)
-                                  ? style?.foregroundColors?.colors
-                                  : null;
-                          final gradient =
-                              label?.gradient ?? buttonStyleGradient;
+                        child: prefix,
+                      )
+                    ] else ...[
+                      prefix ?? const SizedBox.shrink()
+                    ],
+                    Gap(style.padding?.vertical ?? 10),
 
-                          return Text(
+                    /// Choose color
+                    /// label.style.color ??
+                    ///  buttonStyle.label.style.color ??
+                    ///    context.textTheme.labelLarge.color
+                    ///
+                    /// Choose gradient
+                    /// label.gradient ??
+                    ///  buttonStyle.foregroundColor.colors ??
+                    ///    null
+                    ///
+                    /// More infos in `negociate()` method
+                    if (label != null) ...[
+                      Text(
                         label!.text,
-                            style:
-                                (label!.style ?? context.textTheme.titleLarge)
-                                    ?.copyWith(color: color),
+                        style: label!.style ?? style.label,
                       ).toGradient(
                         LinearGradientHelper.fromNullableColors(
-                              gradient,
-                            ),
-                          );
-                        },
+                          label?.gradient ??
+                              ((style.foregroundColors?.isGradient ?? false)
+                                  ? style.foregroundColors?.colors
+                                  : null),
                         ),
+                      )
                     ],
-                    Gap(style.padding ?? 10),
-                    Builder(
-                      builder: (context) {
-                        final color = style?.foregroundColors?.color;
-                        if (color != null) {
-                          return ColorFiltered(
-                            colorFilter:
-                                ColorFilter.mode(color, BlendMode.srcIn),
-                            child: suffix ?? const SizedBox.shrink(),
-                          );
-                        } else {
-                          return suffix ?? const SizedBox.shrink();
-                        }
-                      },
+                    Gap(style.padding?.vertical ?? 10),
+                    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_button.dart

@@ -33,7 +33,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
     super.hoveredStyle,
     super.focusedStyle,
     super.tappedStyle,
-    super.selectedStyle,
     super.onPressed,
     super.key,
   });
@@ -63,9 +62,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
   SimpleIconButtonStyle? get tappedStyle =>
       super.tappedStyle as SimpleIconButtonStyle?;
 
-  @override
-  SimpleIconButtonStyle? get selectedStyle =>
-      super.selectedStyle as SimpleIconButtonStyle?;
 
   @override
   Widget build(BuildContext context) => exportBloc(
@@ -76,7 +72,6 @@ class SimpleIconButton extends SimpleIconButtonComponent
           hoveredStyle: hoveredStyle,
           focusedStyle: focusedStyle,
           tappedStyle: tappedStyle,
-          selectedStyle: selectedStyle,
           onPressed: onPressed,
           key: key,
         ),

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

@@ -13,24 +13,21 @@ class $SimpleIconButtonCWProxyImpl
   @override
   SimpleIconButton icon(Icon? icon) => this(icon: icon);
   @override
-  SimpleIconButton disabledStyle(ButtonStyle? disabledStyle) =>
+  SimpleIconButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
       this(disabledStyle: disabledStyle);
   @override
-  SimpleIconButton normalStyle(ButtonStyle? normalStyle) =>
+  SimpleIconButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
       this(normalStyle: normalStyle);
   @override
-  SimpleIconButton hoveredStyle(ButtonStyle? hoveredStyle) =>
+  SimpleIconButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
       this(hoveredStyle: hoveredStyle);
   @override
-  SimpleIconButton focusedStyle(ButtonStyle? focusedStyle) =>
+  SimpleIconButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
       this(focusedStyle: focusedStyle);
   @override
-  SimpleIconButton tappedStyle(ButtonStyle? tappedStyle) =>
+  SimpleIconButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
       this(tappedStyle: tappedStyle);
   @override
-  SimpleIconButton selectedStyle(ButtonStyle? selectedStyle) =>
-      this(selectedStyle: selectedStyle);
-  @override
   SimpleIconButton onPressed(void Function(ControlState)? onPressed) =>
       this(onPressed: onPressed);
   @override
@@ -38,12 +35,11 @@ class $SimpleIconButtonCWProxyImpl
   @override
   SimpleIconButton call({
     Icon? icon,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   }) =>
@@ -54,7 +50,6 @@ class $SimpleIconButtonCWProxyImpl
         hoveredStyle: hoveredStyle ?? _value.hoveredStyle,
         focusedStyle: focusedStyle ?? _value.focusedStyle,
         tappedStyle: tappedStyle ?? _value.tappedStyle,
-        selectedStyle: selectedStyle ?? _value.selectedStyle,
         onPressed: onPressed ?? _value.onPressed,
         key: key ?? _value.key,
       );

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

@@ -20,7 +20,10 @@ import 'package:wyatt_bloc_helper/wyatt_bloc_helper.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
 import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
+import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/domain/button_theme_extension/simple_icon_button_theme_extension.dart';
 
 class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
   const SimpleIconButtonScreen({
@@ -30,7 +33,6 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
     this.hoveredStyle,
     this.focusedStyle,
     this.tappedStyle,
-    this.selectedStyle,
     this.onPressed,
     super.key,
   });
@@ -42,35 +44,58 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
   final SimpleIconButtonStyle? hoveredStyle;
   final SimpleIconButtonStyle? focusedStyle;
   final SimpleIconButtonStyle? tappedStyle;
-  final SimpleIconButtonStyle? selectedStyle;
 
   final void Function(ControlState state)? onPressed;
 
   @override
   ButtonCubit create(BuildContext context) => ButtonCubit();
 
-  @override
-  Widget onBuild(BuildContext context, ButtonState state) {
-    // Set a default style
-    SimpleIconButtonStyle? style = normalStyle ?? const SimpleIconButtonStyle();
+  /// Negotiate the theme to get a complete style.
+  SimpleIconButtonStyle negotiate(BuildContext context, ControlState state) {
+    // Define default style from Flutter values.
+    SimpleIconButtonStyle style = SimpleIconButtonStyle.fromFlutter(context);
 
-    switch (state.state) {
+    // Try to retrieve custom theme extension
+    final simpleIconButtonThemeExtension =
+        context.themeExtension<SimpleIconButtonThemeExtension>();
+
+    switch (state) {
       case ControlState.disabled:
-        style = disabledStyle ?? style;
+        style = disabledStyle ??
+            simpleIconButtonThemeExtension?.disabledStyle ??
+            style.copyWith(
+              foregroundColors:
+                  MultiColor.single(context.colorScheme.onSurface),
+              backgroundColors: MultiColor.single(context.colorScheme.surface),
+            );
         break;
       case ControlState.hovered:
-        style = hoveredStyle ?? style;
+        style = hoveredStyle ??
+            simpleIconButtonThemeExtension?.hoveredStyle ??
+            style;
         break;
       case ControlState.tapped:
-        style = tappedStyle ?? style;
+        style =
+            tappedStyle ?? simpleIconButtonThemeExtension?.tappedStyle ?? style;
         break;
       case ControlState.focused:
-        style = focusedStyle ?? style;
+        style = focusedStyle ??
+            simpleIconButtonThemeExtension?.focusedStyle ??
+            style;
         break;
       case ControlState.normal:
+        style =
+            normalStyle ?? simpleIconButtonThemeExtension?.normalStyle ?? style;
         break;
     }
 
+    return style;
+  }
+
+  @override
+  Widget onBuild(BuildContext context, ButtonState state) {
+    final style = negotiate(context, state.state);
+
     return Focus(
       onFocusChange: (hasFocus) =>
           hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@@ -104,25 +129,24 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
             bloc(context).onClickUpOut();
           },
           child: SizedBox.square(
-            dimension: style.dimension ?? 30,
+            dimension: style.dimension,
             child: AspectRatio(
               aspectRatio: 1,
               child: DecoratedBox(
                 decoration: BoxDecoration(
-                  color: style.backgroundColors?.color ??
-                      context.colorScheme.tertiary,
+                  color: style.backgroundColors?.color,
                   // If no border color => no default value
-                  border: (style.borderColors != null)
+                  border: (style.borderColors != null && style.stroke != null)
                       ? (style.borderColors?.isGradient ?? false)
                           ? GradientBoxBorder(
                               gradient: LinearGradient(
                                 colors: style.borderColors!.colors,
                               ),
-                              width: style.stroke ?? 2,
+                              width: style.stroke!,
                             )
                           : Border.all(
                               color: style.borderColors!.color,
-                              width: style.stroke ?? 2,
+                              width: style.stroke!,
                             )
                       : null,
                   // if no gradient colors => no default value
@@ -134,52 +158,40 @@ class SimpleIconButtonScreen extends CubitScreen<ButtonCubit, ButtonState> {
                   boxShadow: [
                     if (style.shadow != null) ...[style.shadow!]
                   ],
-                  borderRadius: BorderRadius.all(
-                    Radius.circular(style.radius ?? 0),
-                  ),
+                  borderRadius: style.radius,
                 ),
                 child: ConstrainedBox(
                   constraints: BoxConstraints(
                     minWidth: style.dimension ?? 30,
-                  ), // min sizes for Material buttons
+                  ),
                   child: Padding(
-                    padding: EdgeInsets.all(style.padding ?? 0),
+                    padding: style.padding ?? EdgeInsets.zero,
                     child: Center(
-                      // Choose color
-                      // button.foreground.colors (gradient) ??
-                      //  buttonStyle.foregroundColor.color ??
-                      //    context.colorScheme.onTertiary
+                      /// Choose color
+                      /// icon.color ??
+                      ///  button.foregroundColors.colors ??
+                      ///    buttonStyle.foregroundColors.colors ??
+                      ///      context.buttonTheme.onPrimary
                       child: Builder(
                         builder: (context) {
                           if (icon?.color != null) {
                             return icon!;
                           }
-                          final gradient =
-                              (style?.foregroundColors?.isGradient ?? false)
-                                  ? LinearGradient(
-                                      colors: style!.foregroundColors!.colors,
-                                    )
-                                  : null;
-                          final color = style?.foregroundColors?.color ??
-                              context.colorScheme.onTertiary;
-                          if (gradient != null) {
-                            return ShaderMask(
-                              blendMode: BlendMode.srcIn,
-                              shaderCallback: (bounds) => gradient.createShader(
-                                Rect.fromLTWH(
-                                  0,
-                                  0,
-                                  bounds.width,
-                                  bounds.height,
-                                ),
+
+                          if (!(style.foregroundColors?.isGradient ?? false)) {
+                            return ColorFiltered(
+                              colorFilter: ColorFilter.mode(
+                                style.foregroundColors!.color,
+                                BlendMode.srcIn,
                               ),
                               child: icon,
                             );
                           }
-                          return ColorFiltered(
-                            colorFilter:
-                                ColorFilter.mode(color, BlendMode.srcIn),
-                            child: icon,
+
+                          return icon!.toGradient(
+                            LinearGradientHelper.fromMultiColor(
+                              style.foregroundColors!,
+                            ),
                           );
                         },
                       ),

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

@@ -17,22 +17,22 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
   @override
   SymbolButton icon(Widget? icon) => this(icon: icon);
   @override
-  SymbolButton disabledStyle(ButtonStyle? disabledStyle) =>
+  SymbolButton disabledStyle(ButtonStyle<dynamic>? disabledStyle) =>
       this(disabledStyle: disabledStyle);
   @override
-  SymbolButton normalStyle(ButtonStyle? normalStyle) =>
+  SymbolButton normalStyle(ButtonStyle<dynamic>? normalStyle) =>
       this(normalStyle: normalStyle);
   @override
-  SymbolButton hoveredStyle(ButtonStyle? hoveredStyle) =>
+  SymbolButton hoveredStyle(ButtonStyle<dynamic>? hoveredStyle) =>
       this(hoveredStyle: hoveredStyle);
   @override
-  SymbolButton focusedStyle(ButtonStyle? focusedStyle) =>
+  SymbolButton focusedStyle(ButtonStyle<dynamic>? focusedStyle) =>
       this(focusedStyle: focusedStyle);
   @override
-  SymbolButton tappedStyle(ButtonStyle? tappedStyle) =>
+  SymbolButton tappedStyle(ButtonStyle<dynamic>? tappedStyle) =>
       this(tappedStyle: tappedStyle);
   @override
-  SymbolButton selectedStyle(ButtonStyle? selectedStyle) =>
+  SymbolButton selectedStyle(ButtonStyle<dynamic>? selectedStyle) =>
       this(selectedStyle: selectedStyle);
   @override
   SymbolButton onPressed(void Function(ControlState)? onPressed) =>
@@ -44,12 +44,12 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
     MainAxisSize? mainAxisSize,
     TextWrapper? label,
     Widget? icon,
-    ButtonStyle? disabledStyle,
-    ButtonStyle? normalStyle,
-    ButtonStyle? hoveredStyle,
-    ButtonStyle? focusedStyle,
-    ButtonStyle? tappedStyle,
-    ButtonStyle? selectedStyle,
+    ButtonStyle<dynamic>? disabledStyle,
+    ButtonStyle<dynamic>? normalStyle,
+    ButtonStyle<dynamic>? hoveredStyle,
+    ButtonStyle<dynamic>? focusedStyle,
+    ButtonStyle<dynamic>? tappedStyle,
+    ButtonStyle<dynamic>? selectedStyle,
     void Function(ControlState)? onPressed,
     Key? key,
   }) =>

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

@@ -25,6 +25,7 @@ import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
 import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
 import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/domain/button_theme_extension/symbol_button_theme_extension.dart';
 
 class SymbolButtonScreen
     extends CubitScreen<SelectableButtonCubit, ButtonState> {
@@ -44,6 +45,7 @@ class SymbolButtonScreen
 
   final Widget? icon;
   final TextWrapper? label;
+  final MainAxisSize? mainAxisSize;
 
   final SymbolButtonStyle? disabledStyle;
   final SymbolButtonStyle? normalStyle;
@@ -54,37 +56,94 @@ class SymbolButtonScreen
 
   final void Function(ControlState state)? onPressed;
 
-  final MainAxisSize? mainAxisSize;
-
   @override
   SelectableButtonCubit create(BuildContext context) => SelectableButtonCubit();
 
-  @override
-  Widget onBuild(BuildContext context, ButtonState state) {
-    // Set a default style
-    SymbolButtonStyle? style = normalStyle ?? const SymbolButtonStyle();
+  /// Negotiate the theme to get a complete style.
+  SymbolButtonStyle negotiate(BuildContext context, ButtonState state) {
+    // Define default style from Flutter values.
+    SymbolButtonStyle style = SymbolButtonStyle.fromFlutter(context);
+
+    // Try to retrieve custom theme extension
+    final symbolButtonThemeExtension =
+        context.themeExtension<SymbolButtonThemeExtension>();
 
     switch (state.state) {
       case ControlState.disabled:
-        style = disabledStyle ?? style;
+        style = disabledStyle ??
+            symbolButtonThemeExtension?.disabledStyle ??
+            style.copyWith(
+              foregroundColors:
+                  MultiColor.single(context.colorScheme.onSurface),
+              backgroundColors: MultiColor.single(context.colorScheme.surface),
+            );
         break;
       case ControlState.hovered:
-        style = hoveredStyle ?? style;
+        style =
+            hoveredStyle ?? symbolButtonThemeExtension?.hoveredStyle ?? style;
         break;
       case ControlState.tapped:
-        style = tappedStyle ?? style;
+        style = tappedStyle ?? symbolButtonThemeExtension?.tappedStyle ?? style;
         break;
       case ControlState.focused:
-        style = focusedStyle ?? style;
+        style =
+            focusedStyle ?? symbolButtonThemeExtension?.focusedStyle ?? style;
         break;
       case ControlState.normal:
+        style = normalStyle ?? symbolButtonThemeExtension?.normalStyle ?? style;
         break;
     }
 
+    // Apply extra theme
     if (state.isSelected) {
-      style = selectedStyle ?? style;
+      // TODO(hpcl): enhance copyWith to copy only non-null attributes of an object
+      style = style.copyWith(
+        label: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .label,
+        dimension: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .dimension,
+        radius: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .radius,
+        padding: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .padding,
+        foregroundColors: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .foregroundColors,
+        backgroundColors: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .backgroundColors,
+        borderColors: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .borderColors,
+        stroke: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .stroke,
+        shadow: (selectedStyle ??
+                symbolButtonThemeExtension?.selectedStyle ??
+                style)
+            .shadow,
+      );
     }
 
+    return style;
+  }
+
+  @override
+  Widget onBuild(BuildContext context, ButtonState state) {
+    final style = negotiate(context, state);
+
     return Focus(
       onFocusChange: (hasFocus) =>
           hasFocus ? bloc(context).onFocus() : bloc(context).onUnfocus(),
@@ -122,25 +181,25 @@ class SymbolButtonScreen
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               SizedBox.square(
-                dimension: style.dimension ?? 60,
+                dimension: style.dimension,
                 child: AspectRatio(
                   aspectRatio: 1,
                   child: DecoratedBox(
                     decoration: BoxDecoration(
-                      color: style.backgroundColors?.color ??
-                          context.colorScheme.primary,
+                      color: style.backgroundColors?.color,
                       // If no border color => no default value
-                      border: (style.borderColors != null)
+                      border:
+                          (style.borderColors != null && style.stroke != null)
                               ? (style.borderColors?.isGradient ?? false)
                                   ? GradientBoxBorder(
                                       gradient: LinearGradient(
                                         colors: style.borderColors!.colors,
                                       ),
-                                  width: style.stroke ?? 2,
+                                      width: style.stroke!,
                                     )
                                   : Border.all(
                                       color: style.borderColors!.color,
-                                  width: style.stroke ?? 2,
+                                      width: style.stroke!,
                                     )
                               : null,
                       // if no gradient colors => no default value
@@ -152,92 +211,44 @@ class SymbolButtonScreen
                       boxShadow: [
                         if (style.shadow != null) ...[style.shadow!]
                       ],
-                      borderRadius: BorderRadius.all(
-                        Radius.circular(style.radius ?? 0),
-                      ),
+                      borderRadius: style.radius,
                     ),
                     child: ConstrainedBox(
                       constraints: BoxConstraints(
                         minWidth: style.dimension ?? 60,
                       ), // min sizes for Material buttons
                       child: Padding(
-                        padding: EdgeInsets.all(style.padding ?? 0),
-                        child: Center(
-                          // Choose color
-                          // button.foreground.colors (gradient) ??
-                          //  buttonStyle.foregroundColor.color ??
-                          //    context.colorScheme.secondary
-                          child: Builder(
-                            builder: (context) {
-                              final gradient =
-                                  (style?.foregroundColors?.isGradient ?? false)
-                                      ? LinearGradient(
-                                          colors:
-                                              style!.foregroundColors!.colors,
-                                        )
-                                      : null;
-                              final color = style?.foregroundColors?.color ??
-                                  context.colorScheme.secondary;
-                              if (gradient != null) {
-                                return ShaderMask(
-                                  blendMode: BlendMode.srcIn,
-                                  shaderCallback: (bounds) =>
-                                      gradient.createShader(
-                                    Rect.fromLTWH(
-                                      0,
-                                      0,
-                                      bounds.width,
-                                      bounds.height,
-                                    ),
-                                  ),
-                                  child: icon,
-                                );
-                              }
-                              return ColorFiltered(
-                                colorFilter:
-                                    ColorFilter.mode(color, BlendMode.srcIn),
-                                child: icon,
-                              );
-                            },
+                        padding: style.padding ?? EdgeInsets.zero,
+                        child: Center(child: icon),
                       ),
                     ),
                   ),
                 ),
               ),
-                ),
-              ),
-              // Choose color
-              // label.style.color ??
-              //  buttonStyle.foregroundColor.color ??
-              //    context.textTheme.titleLarge.color
-              //
-              // Choose gradient
-              // label.gradient ??
-              //  buttonStyle.foregroundColor.colors ??
-              //    null
-              if (label != null) ...[
-                const Gap(10),
-                Builder(
-                  builder: (context) {
-                    final color = label?.style?.color ??
-                        style?.foregroundColors?.color ??
-                        context.textTheme.titleLarge?.color;
-                    final buttonStyleGradient =
-                        (style?.foregroundColors?.isGradient ?? false)
-                            ? style?.foregroundColors?.colors
-                            : null;
-                    final gradient = label?.gradient ?? buttonStyleGradient;
 
-                    return Text(
+              /// Choose color
+              /// label.style.color ??
+              ///  buttonStyle.label.style.color ??
+              ///    context.textTheme.labelLarge.color
+              ///
+              /// Choose gradient
+              /// label.gradient ??
+              ///  buttonStyle.foregroundColor.colors ??
+              ///    null
+              ///
+              /// More infos in `negociate()` method
+              if (label != null) ...[
+                Gap(style.padding?.horizontal ?? 10),
+                Text(
                   label!.text,
-                      style: (label!.style ?? context.textTheme.titleMedium)
-                          ?.copyWith(color: color),
+                  style: label!.style ?? style.label,
                 ).toGradient(
                   LinearGradientHelper.fromNullableColors(
-                        gradient,
+                    label?.gradient ??
+                        ((style.foregroundColors?.isGradient ?? false)
+                            ? style.foregroundColors?.colors
+                            : null),
                   ),
-                    );
-                  },
                 ),
               ],
             ],

packages/wyatt_ui_kit/lib/src/components/gradients/gradient_icon.dart

@@ -16,7 +16,7 @@
 
 import 'package:flutter/widgets.dart';
 
-extension GradientTextExtension on Icon {
+extension GradientIconExtension on Icon {
   GradientIcon toGradient(Gradient? gradient) =>
       GradientIcon.from(this, gradient);
 }

packages/wyatt_ui_kit/lib/src/core/extensions/theme_extensions.dart

@@ -16,8 +16,6 @@
 
 import 'package:flutter/material.dart';
 
-extension ThemeExtension on BuildContext {
-  TextTheme get textTheme => Theme.of(this).textTheme;
-  ColorScheme get colorScheme => Theme.of(this).colorScheme;
-  ButtonThemeData get buttonTheme => Theme.of(this).buttonTheme;
+extension BuildContextThemeExtension on BuildContext {
+  T? themeExtension<T>() => Theme.of(this).extension<T>();
 }

packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/button_theme_extension.dart

@@ -0,0 +1,20 @@
+// 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/>.
+
+export 'file_selection_button_theme_extension.dart';
+export 'flat_button_theme_extension.dart';
+export 'simple_icon_button_theme_extension.dart';
+export 'symbol_button_theme_extension.dart';

packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/file_selection_button_theme_extension.dart

@@ -0,0 +1,52 @@
+// 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';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class FileSelectionButtonThemeExtension
+    extends ThemeExtension<FileSelectionButtonThemeExtension> {
+  const FileSelectionButtonThemeExtension({
+    this.disabledStyle,
+    this.focusedStyle,
+    this.hoveredStyle,
+    this.normalStyle,
+    this.tappedStyle,
+    this.selectedStyle,
+    this.invalidStyle,
+  });
+
+  /// Style of this button in disabled state
+  final FileSelectionButtonStyle? disabledStyle;
+
+  /// Style of this button in focused state
+  final FileSelectionButtonStyle? focusedStyle;
+
+  /// Style of this button in hovered state
+  final FileSelectionButtonStyle? hoveredStyle;
+
+  /// Style of this button in normal state
+  final FileSelectionButtonStyle? normalStyle;
+
+  /// Style of this button in tapped state
+  final FileSelectionButtonStyle? tappedStyle;
+
+  /// Style of this button in selected state
+  final FileSelectionButtonStyle? selectedStyle;
+
+  /// Style of this button in invalid state
+  final FileSelectionButtonStyle? invalidStyle;
+}

packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/flat_button_theme_extension.dart

@@ -0,0 +1,44 @@
+// 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';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class FlatButtonThemeExtension
+    extends ThemeExtension<FlatButtonThemeExtension> {
+  const FlatButtonThemeExtension({
+    this.disabledStyle,
+    this.focusedStyle,
+    this.hoveredStyle,
+    this.normalStyle,
+    this.tappedStyle,
+  });
+
+  /// Style of this button in disabled state
+  final FlatButtonStyle? disabledStyle;
+
+  /// Style of this button in focused state
+  final FlatButtonStyle? focusedStyle;
+
+  /// Style of this button in hovered state
+  final FlatButtonStyle? hoveredStyle;
+
+  /// Style of this button in normal state
+  final FlatButtonStyle? normalStyle;
+
+  /// Style of this button in tapped state
+  final FlatButtonStyle? tappedStyle;
+}

packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/simple_icon_button_theme_extension.dart

@@ -0,0 +1,44 @@
+// 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';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class SimpleIconButtonThemeExtension
+    extends ThemeExtension<SimpleIconButtonThemeExtension> {
+  const SimpleIconButtonThemeExtension({
+    this.disabledStyle,
+    this.focusedStyle,
+    this.hoveredStyle,
+    this.normalStyle,
+    this.tappedStyle,
+  });
+
+  /// Style of this button in disabled state
+  final SimpleIconButtonStyle? disabledStyle;
+
+  /// Style of this button in focused state
+  final SimpleIconButtonStyle? focusedStyle;
+
+  /// Style of this button in hovered state
+  final SimpleIconButtonStyle? hoveredStyle;
+
+  /// Style of this button in normal state
+  final SimpleIconButtonStyle? normalStyle;
+
+  /// Style of this button in tapped state
+  final SimpleIconButtonStyle? tappedStyle;
+}

packages/wyatt_ui_kit/lib/src/domain/button_theme_extension/symbol_button_theme_extension.dart

@@ -0,0 +1,48 @@
+// 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';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class SymbolButtonThemeExtension
+    extends ThemeExtension<SymbolButtonThemeExtension> {
+  const SymbolButtonThemeExtension({
+    this.disabledStyle,
+    this.focusedStyle,
+    this.hoveredStyle,
+    this.normalStyle,
+    this.tappedStyle,
+    this.selectedStyle,
+  });
+
+  /// Style of this button in disabled state
+  final SymbolButtonStyle? disabledStyle;
+
+  /// Style of this button in focused state
+  final SymbolButtonStyle? focusedStyle;
+
+  /// Style of this button in hovered state
+  final SymbolButtonStyle? hoveredStyle;
+
+  /// Style of this button in normal state
+  final SymbolButtonStyle? normalStyle;
+
+  /// Style of this button in tapped state
+  final SymbolButtonStyle? tappedStyle;
+
+  /// Style of this button in selected state
+  final SymbolButtonStyle? selectedStyle;
+}

packages/wyatt_ui_kit/lib/src/domain/domain.dart

@@ -0,0 +1,18 @@
+// 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/>.
+
+export 'button_theme_extension/button_theme_extension.dart';
+export 'card_theme_extension.dart';

packages/wyatt_ui_kit/lib/src/src.dart

@@ -14,22 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-// 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/>.
-
 export './components/components.dart';
 export './core/core.dart';
-export './domain/card_theme_extension.dart';
+export './domain/domain.dart';

packages/wyatt_ui_kit/lib/wyatt_ui_kit.dart

@@ -17,4 +17,6 @@
 /// UIKit and Design System used in Wyatt Studio.
 library wyatt_ui_kit;
 
+export 'package:wyatt_ui_components/src/core/extensions/build_context_extensions.dart';
+
 export './src/src.dart';