style(ui_kit): fix padding file selection

mason-lock.json

@@ -1 +1 @@
-{"bricks":{"wyatt_clean_code":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_clean_code","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}},"wyatt_feature_brick":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_feature_brick","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}},"wyatt_package_template":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_package_template","ref":"5009f1ef21d8531b773298c0fc08704d8f69afd1"}}}}
+{"bricks":{"wyatt_component_template":{"git":{"url":"ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git","path":"bricks/wyatt_component_template","ref":"7cea909470ce75b91840f479649b93f953ded596"}}}}

mason.yaml

@@ -1,13 +1,25 @@
+# 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/>.
+
 bricks:
-  wyatt_clean_code:
-    git:
-      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
-      path: bricks/wyatt_clean_code
-  wyatt_feature_brick:
-    git:
-      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
-      path: bricks/wyatt_feature_brick
   wyatt_package_template:
     git:
       url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
       path: bricks/wyatt_package_template
+  wyatt_component_template:
+    git:
+      url: "ssh://git@git.wyatt-studio.fr:993/Wyatt-FOSS/wyatt-bricks.git"
+      path: bricks/wyatt_component_template

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

@@ -14,7 +14,8 @@
 // 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 'enums/control_state.dart';
 export 'extensions/build_context_extensions.dart';
 export 'extensions/string_extension.dart';
 export 'mixins/copy_with_mixin.dart';
-export 'utils/text_wrapper.dart';
+export 'utils/utils.dart';

packages/wyatt_ui_components/lib/src/core/enums/control_state.dart

@@ -0,0 +1,38 @@
+// 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/>.
+
+enum ControlState {
+  /// When the control is disabled and un-clickable
+  disabled,
+
+  /// Default state of a control
+  normal,
+
+  /// When the mouse cursor is hover the control
+  hovered,
+
+  /// When the control is clicked
+  tapped,
+
+  /// When the control is focused (like pressing tab)
+  focused;
+
+  bool isDisabled() => this == ControlState.disabled;
+  bool isEnabled() => this != ControlState.disabled;
+  bool isHovered() => this == ControlState.hovered;
+  bool isTapped() => this == ControlState.tapped;
+  bool isFocused() => this == ControlState.focused;
+}

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

@@ -0,0 +1,57 @@
+// 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/widgets.dart';
+
+class MultiColor {
+  const MultiColor(this._colors) : _color = null;
+  const MultiColor.single(this._color) : _colors = null;
+
+  final List<Color>? _colors;
+  final Color? _color;
+
+  Color get color {
+    if (_color != null) {
+      return _color!;
+    }
+    if (_colors?.isNotEmpty ?? false) {
+      return _colors!.first;
+    }
+    throw IndexError.withLength(
+      0,
+      _colors?.length ?? 0,
+      message: '_color is not defined or _colors is empty.',
+    );
+  }
+
+  List<Color> get colors => _colors ?? [];
+
+  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;
+  }
+
+  @override
+  String toString() => 'MultiColor(_colors: $_colors, _color: $_color)';
+}

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

@@ -0,0 +1,88 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+
+/// {@template theme_resolver}
+/// In charge of theme negotiation and merge.
+///
+/// When you build a component `Component({double? radius})`.
+/// You have several possibilities:
+/// 1) Pass the "radius" into the constructor, `Component(radius: 12)`.
+/// 2) Set up a theme extension `ComponentThemeExtension(radius: 15)`.
+/// 3) Let `wyatt_ui_kit` "negotiate" and try to find a suitable style in the
+/// flutter theme.
+///
+/// If this negotiation phase fails, then:
+/// - If the value is mandatory: a hardcoded value in "wyatt_ui_kit" is chosen.
+/// - If not, the style is simply not applied.
+/// {@endtemplate}
+abstract class ThemeResolver<S, T, E> {
+  /// {@macro theme_resolver}
+  const ThemeResolver();
+
+  S? Function(
+    BuildContext context,
+    S defaultValue,
+    T themeExtension, {
+    E? extra,
+  }) get computeExtensionValueFn;
+  S? Function(BuildContext context, {E? extra}) get customStyleFn;
+
+  /// Compute default value from Flutter Theme or with hardcoded values.
+  S computeDefaultValue(BuildContext context, {E? extra});
+
+  /// Compute values from the extension if found
+  S? computeExtensionValue(
+    BuildContext context,
+    S defaultValue, {
+    E? extra,
+  }) {
+    final themeExtension = findExtension(context);
+    if (themeExtension != null) {
+      return computeExtensionValueFn(
+        context,
+        defaultValue,
+        themeExtension,
+        extra: extra,
+      );
+    }
+    return defaultValue;
+  }
+
+  /// Compute custom value
+  S? computeCustomValue(
+    BuildContext context,
+    S previousPhaseValue, {
+    E? extra,
+  }) {
+    final customStyle = customStyleFn(context, extra: extra);
+    if (customStyle != null) {
+      return customStyle;
+    }
+    return previousPhaseValue;
+  }
+
+  T? findExtension(BuildContext context) => Theme.of(context).extension<T>();
+
+  /// Choose most suitable style for a given context.
+  S negotiate(BuildContext context, {E? extra}) {
+    S style = computeDefaultValue(context, extra: extra);
+    style = computeExtensionValue(context, style, extra: extra) ?? style;
+    style = computeCustomValue(context, style, extra: extra) ?? style;
+    return style;
+  }
+}

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

@@ -0,0 +1,19 @@
+// 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 'multi_color.dart';
+export 'text_wrapper.dart';
+export 'theme_resolver.dart';

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

@@ -0,0 +1,59 @@
+// 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:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+abstract class ButtonComponent extends Component {
+  const ButtonComponent({
+    this.disabledStyle,
+    this.normalStyle,
+    this.hoveredStyle,
+    this.focusedStyle,
+    this.tappedStyle,
+    this.selectedStyle,
+    this.invalidStyle,
+    this.onPressed,
+    this.themeResolver,
+    super.key,
+  });
+
+  /// Style of this button in disabled state
+  final ButtonStyle<dynamic>? disabledStyle;
+
+  /// Style of this button in normal state
+  final ButtonStyle<dynamic>? normalStyle;
+
+  /// Style of this button in hovered state
+  final ButtonStyle<dynamic>? hoveredStyle;
+
+  /// Style of this button in focused state
+  final ButtonStyle<dynamic>? focusedStyle;
+
+  /// Style of this button in tapped state
+  final ButtonStyle<dynamic>? tappedStyle;
+
+  /// Style of this button in selected state
+  final ButtonStyle<dynamic>? selectedStyle;
+
+  /// Style of this button in invalid state
+  final ButtonStyle<dynamic>? invalidStyle;
+
+  /// Callback on button press
+  final void Function(ControlState state)? onPressed;
+
+  /// Theme Resolver for this component
+  final ThemeResolver<dynamic, dynamic, dynamic>? themeResolver;
+}

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

@@ -0,0 +1,71 @@
+// 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/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+
+abstract class ButtonStyle<T> {
+  const ButtonStyle({
+    this.radius,
+    this.padding,
+    this.foregroundColors,
+    this.backgroundColors,
+    this.borderColors,
+    this.stroke,
+    this.shadow,
+  });
+
+  /// Button radius
+  ///
+  /// Default to `BorderRadius.all(Radius.circular(4.0))`
+  final BorderRadiusGeometry? radius;
+
+  /// 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;
+
+  @override
+  String toString() =>
+      'ButtonStyle(radius: $radius, padding: $padding, foregroundColors: '
+      '$foregroundColors, backgroundColors: $backgroundColors, borderColors: '
+      '$borderColors, stroke: $stroke, shadow: $shadow)';
+}

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

@@ -0,0 +1,26 @@
+// 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_component.dart';
+export './button_style.dart';
+export './file_selection_button_component.dart';
+export './file_selection_button_style.dart';
+export './flat_button_component.dart';
+export './flat_button_style.dart';
+export './simple_icon_button_component.dart';
+export './simple_icon_button_style.dart';
+export './symbol_button_component.dart';
+export './symbol_button_style.dart';

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

@@ -0,0 +1,70 @@
+// 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/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'file_selection_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class FileSelectionButtonComponent extends ButtonComponent
+    with CopyWithMixin<$FileSelectionButtonComponentCWProxy> {
+  const FileSelectionButtonComponent({
+    this.mainAxisSize = MainAxisSize.min,
+    this.leading,
+    this.title,
+    this.subTitle,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+    super.invalidStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  FileSelectionButtonStyle? get disabledStyle;
+
+  @override
+  FileSelectionButtonStyle? get normalStyle;
+
+  @override
+  FileSelectionButtonStyle? get hoveredStyle;
+
+  @override
+  FileSelectionButtonStyle? get focusedStyle;
+
+  @override
+  FileSelectionButtonStyle? get tappedStyle;
+
+  // When a file is selected
+  @override
+  FileSelectionButtonStyle? get selectedStyle;
+
+  // When the input file is invalid (too large, not supported format... etc)
+  @override
+  FileSelectionButtonStyle? get invalidStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? leading;
+  final TextWrapper? title;
+  final TextWrapper? subTitle;
+}

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

@@ -0,0 +1,41 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'file_selection_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $FileSelectionButtonComponentCWProxy {
+  FileSelectionButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  FileSelectionButtonComponent leading(Widget? leading);
+  FileSelectionButtonComponent title(TextWrapper? title);
+  FileSelectionButtonComponent subTitle(TextWrapper? subTitle);
+  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);
+  FileSelectionButtonComponent call({
+    MainAxisSize? mainAxisSize,
+    Widget? leading,
+    TextWrapper? title,
+    TextWrapper? subTitle,
+    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

@@ -0,0 +1,84 @@
+// 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+part 'file_selection_button_style.g.dart';
+
+@CopyWith()
+class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {
+  const FileSelectionButtonStyle({
+    this.title,
+    this.subTitle,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// 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

@@ -0,0 +1,60 @@
+// 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/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'flat_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class FlatButtonComponent extends ButtonComponent
+    with CopyWithMixin<$FlatButtonComponentCWProxy> {
+  const FlatButtonComponent({
+    this.mainAxisSize,
+    this.prefix,
+    this.suffix,
+    this.label,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  FlatButtonStyle? get disabledStyle;
+
+  @override
+  FlatButtonStyle? get normalStyle;
+
+  @override
+  FlatButtonStyle? get hoveredStyle;
+
+  @override
+  FlatButtonStyle? get focusedStyle;
+
+  @override
+  FlatButtonStyle? get tappedStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? prefix;
+  final Widget? suffix;
+  final TextWrapper? label;
+}

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

@@ -0,0 +1,34 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'flat_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $FlatButtonComponentCWProxy {
+  FlatButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  FlatButtonComponent prefix(Widget? prefix);
+  FlatButtonComponent suffix(Widget? suffix);
+  FlatButtonComponent label(TextWrapper? label);
+  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({
+    MainAxisSize? mainAxisSize,
+    Widget? prefix,
+    Widget? suffix,
+    TextWrapper? label,
+    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

@@ -0,0 +1,81 @@
+// 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+part 'flat_button_style.g.dart';
+
+@CopyWith()
+class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {
+  const FlatButtonStyle({
+    this.label,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// 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;
+
+  @override
+  String toString() =>
+      'FlatButtonStyle(label: $label), inherited: ${super.toString()}';
+}

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

@@ -0,0 +1,54 @@
+// 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/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'simple_icon_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class SimpleIconButtonComponent extends ButtonComponent
+    with CopyWithMixin<$SimpleIconButtonComponentCWProxy> {
+  const SimpleIconButtonComponent({
+    this.icon,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  SimpleIconButtonStyle? get disabledStyle;
+
+  @override
+  SimpleIconButtonStyle? get normalStyle;
+
+  @override
+  SimpleIconButtonStyle? get hoveredStyle;
+
+  @override
+  SimpleIconButtonStyle? get focusedStyle;
+
+  @override
+  SimpleIconButtonStyle? get tappedStyle;
+
+  final Icon? icon;
+}

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

@@ -0,0 +1,28 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'simple_icon_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $SimpleIconButtonComponentCWProxy {
+  SimpleIconButtonComponent icon(Icon? icon);
+  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<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

@@ -0,0 +1,77 @@
+// 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+part 'simple_icon_button_style.g.dart';
+
+@CopyWith()
+class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {
+  const SimpleIconButtonStyle({
+    this.dimension,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// 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.dart

@@ -0,0 +1,62 @@
+// 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/widgets.dart';
+import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'symbol_button_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class SymbolButtonComponent extends ButtonComponent
+    with CopyWithMixin<$SymbolButtonComponentCWProxy> {
+  const SymbolButtonComponent({
+    this.mainAxisSize = MainAxisSize.min,
+    this.label,
+    this.icon,
+    super.disabledStyle,
+    super.normalStyle,
+    super.hoveredStyle,
+    super.focusedStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+    super.onPressed,
+    super.themeResolver,
+    super.key,
+  });
+
+  @override
+  SymbolButtonStyle? get disabledStyle;
+
+  @override
+  SymbolButtonStyle? get normalStyle;
+
+  @override
+  SymbolButtonStyle? get hoveredStyle;
+
+  @override
+  SymbolButtonStyle? get focusedStyle;
+
+  @override
+  SymbolButtonStyle? get tappedStyle;
+
+  @override
+  SymbolButtonStyle? get selectedStyle;
+
+  final MainAxisSize? mainAxisSize;
+  final Widget? icon;
+  final TextWrapper? label;
+}

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

@@ -0,0 +1,34 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'symbol_button_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $SymbolButtonComponentCWProxy {
+  SymbolButtonComponent mainAxisSize(MainAxisSize? mainAxisSize);
+  SymbolButtonComponent label(TextWrapper? label);
+  SymbolButtonComponent icon(Widget? icon);
+  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<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

@@ -0,0 +1,84 @@
+// 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 'dart:ui';
+
+import 'package:copy_with_extension/copy_with_extension.dart';
+import 'package:flutter/widgets.dart';
+import 'package:wyatt_ui_components/src/core/utils/multi_color.dart';
+import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dart';
+
+part 'symbol_button_style.g.dart';
+
+@CopyWith()
+class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {
+  const SymbolButtonStyle({
+    this.label,
+    this.dimension,
+    super.radius,
+    super.padding,
+    super.foregroundColors,
+    super.backgroundColors,
+    super.borderColors,
+    super.stroke,
+    super.shadow,
+  });
+
+  /// 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/card_component.dart

@@ -22,7 +22,7 @@ abstract class CardComponent extends Component {
     this.radius = 12,
     this.padding = 25,
     this.borderColors,
-    this.backgroundColor,
+    this.backgroundColors,
     this.minSize = const Size(330, 230),
     this.maxSize = const Size(330, 530),
     this.shadow = const BoxShadow(
@@ -44,7 +44,7 @@ abstract class CardComponent extends Component {
   final List<Color>? borderColors;
 
   /// Card background color
-  final Color? backgroundColor;
+  final List<Color>? backgroundColors;
 
   /// Minimum size for this card
   final Size? minSize;

packages/wyatt_ui_components/lib/src/domain/entities/cards/information_card_component.dart

@@ -33,7 +33,7 @@ abstract class InformationCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

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

@@ -15,7 +15,7 @@ abstract class $InformationCardComponentCWProxy {
   InformationCardComponent radius(double? radius);
   InformationCardComponent padding(double? padding);
   InformationCardComponent borderColors(List<Color>? borderColors);
-  InformationCardComponent backgroundColor(Color? backgroundColor);
+  InformationCardComponent backgroundColors(List<Color>? backgroundColors);
   InformationCardComponent minSize(Size? minSize);
   InformationCardComponent maxSize(Size? maxSize);
   InformationCardComponent shadow(BoxShadow? shadow);
@@ -30,7 +30,7 @@ abstract class $InformationCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.dart

@@ -25,6 +25,7 @@ part 'portfolio_card_component.g.dart';
 abstract class PortfolioCardComponent extends CardComponent
     with CopyWithMixin<$PortfolioCardComponentCWProxy> {
   const PortfolioCardComponent({
+    this.secondaryBackgroundColors,
     this.showImagesOnTop,
     this.keyword,
     this.description,
@@ -36,7 +37,7 @@ abstract class PortfolioCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -46,10 +47,11 @@ abstract class PortfolioCardComponent extends CardComponent
 
   final bool? showImagesOnTop;
   final List<TextWrapper>? keyword;
-  final List<String>? assets;
+  final List<Widget>? assets;
   final TextWrapper? description;
-  final String? logo;
+  final Widget? logo;
   final TextWrapper? projectName;
   final TextWrapper? subtitle;
   final List<Widget>? ctas;
+  final Color? secondaryBackgroundColors;
 }

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

@@ -7,36 +7,39 @@ part of 'portfolio_card_component.dart';
 // **************************************************************************
 
 abstract class $PortfolioCardComponentCWProxy {
+  PortfolioCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   PortfolioCardComponent showImagesOnTop(bool? showImagesOnTop);
   PortfolioCardComponent keyword(List<TextWrapper>? keyword);
   PortfolioCardComponent description(TextWrapper? description);
-  PortfolioCardComponent logo(String? logo);
+  PortfolioCardComponent logo(Widget? logo);
   PortfolioCardComponent projectName(TextWrapper? projectName);
   PortfolioCardComponent subtitle(TextWrapper? subtitle);
   PortfolioCardComponent ctas(List<Widget>? ctas);
-  PortfolioCardComponent assets(List<String>? assets);
+  PortfolioCardComponent assets(List<Widget>? assets);
   PortfolioCardComponent radius(double? radius);
   PortfolioCardComponent padding(double? padding);
   PortfolioCardComponent borderColors(List<Color>? borderColors);
-  PortfolioCardComponent backgroundColor(Color? backgroundColor);
+  PortfolioCardComponent backgroundColors(List<Color>? backgroundColors);
   PortfolioCardComponent minSize(Size? minSize);
   PortfolioCardComponent maxSize(Size? maxSize);
   PortfolioCardComponent shadow(BoxShadow? shadow);
   PortfolioCardComponent background(Widget? background);
   PortfolioCardComponent key(Key? key);
   PortfolioCardComponent call({
+    Color? secondaryBackgroundColors,
     bool? showImagesOnTop,
     List<TextWrapper>? keyword,
     TextWrapper? description,
-    String? logo,
+    Widget? logo,
     TextWrapper? projectName,
     TextWrapper? subtitle,
     List<Widget>? ctas,
-    List<String>? assets,
+    List<Widget>? assets,
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/quote_card_component.dart

@@ -35,7 +35,7 @@ abstract class QuoteCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

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

@@ -17,7 +17,7 @@ abstract class $QuoteCardComponentCWProxy {
   QuoteCardComponent radius(double? radius);
   QuoteCardComponent padding(double? padding);
   QuoteCardComponent borderColors(List<Color>? borderColors);
-  QuoteCardComponent backgroundColor(Color? backgroundColor);
+  QuoteCardComponent backgroundColors(List<Color>? backgroundColors);
   QuoteCardComponent minSize(Size? minSize);
   QuoteCardComponent maxSize(Size? maxSize);
   QuoteCardComponent shadow(BoxShadow? shadow);
@@ -34,7 +34,7 @@ abstract class $QuoteCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

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

@@ -31,10 +31,11 @@ abstract class SkillCardComponent extends CardComponent
     this.description,
     this.skills,
     this.leadingIcon,
+    this.secondaryBackgroundColors,
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -48,4 +49,5 @@ abstract class SkillCardComponent extends CardComponent
   final TextWrapper? description;
   final List<TextWrapper>? skills;
   final IconData? leadingIcon;
+  final Color? secondaryBackgroundColors;
 }

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

@@ -13,10 +13,12 @@ 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);
-  SkillCardComponent backgroundColor(Color? backgroundColor);
+  SkillCardComponent backgroundColors(List<Color>? backgroundColors);
   SkillCardComponent minSize(Size? minSize);
   SkillCardComponent maxSize(Size? maxSize);
   SkillCardComponent shadow(BoxShadow? shadow);
@@ -29,10 +31,11 @@ abstract class $SkillCardComponentCWProxy {
     TextWrapper? description,
     List<TextWrapper>? skills,
     IconData? leadingIcon,
+    Color? secondaryBackgroundColors,
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

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

@@ -16,6 +16,7 @@
 
 export './app_bar_component.dart';
 export './bottom_navigation_bar_component.dart';
+export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';
 export './error_widget_component.dart';

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/README.md

@@ -25,6 +25,25 @@
 
 UIKit and Design System used in Wyatt Studio.
 
+## Theme negotiation
+
+When building a component, most of its attributes can be 'null'.
+The `build()` method then starts to negotiate the theme in the tree to obtain the most consistent style possible.
+
+Explanation:
+
+When you build a component `Button({double? radius})`.
+You have several possibilities:
+1) Pass the "radius" into the constructor, `Button(radius: 12)`.
+2) Set up a theme extension `ButtonThemeExtension(radius: 15)`.
+3) Let `wyatt_ui_kit` "negotiate" and try to find a suitable style in the flutter theme. 
+
+If this negotiation phase fails, then: 
+- If the value is mandatory: a hardcoded value in "wyatt_ui_kit" is chosen.
+- If not, the style is simply not applied.
+
+If, for example, you don't use option 1, then the radius will be 15. If you use neither option 1 nor option 2 then the radius will be 4 as this is the [official Material Design value](https://m2.material.io/design/shape/about-shape.html#shape-customization-tool).
+
 ## Features
 
 TODO: List what your package can do. Maybe include images, gifs, or videos.

packages/wyatt_ui_kit/example/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "studio-landpage"
+  }
+}

packages/wyatt_ui_kit/example/.gitignore

@@ -32,6 +32,9 @@ migrate_working_dir/
 .pub/
 /build/
 
+# Firebase
+.firebase/
+
 # Symbolication related
 app.*.symbols
 

packages/wyatt_ui_kit/example/README.md

@@ -1,16 +1,9 @@
-# example
+# Wyatt UIKIt Example
 
-A new Flutter project.
+You can force the launch page. (For debug purposes).
 
-## Getting Started
+```shell
+flutter run -d macos --dart-define PAGE=1 --dart-define THEME=1
+```
 
-This project is a starting point for a Flutter application.
-
-A few resources to get you started if this is your first Flutter project:
-
-- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
-
-For help getting started with Flutter development, view the
-[online documentation](https://docs.flutter.dev/), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+> This will forces `Buttons` page with `Studio` theme

packages/wyatt_ui_kit/example/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build/web",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,54 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_kit_example/buttons/file_selection_button/file_selection_buttons.dart';
+import 'package:wyatt_ui_kit_example/buttons/flat_button/flat_buttons.dart';
+import 'package:wyatt_ui_kit_example/buttons/simple_icon_button/simple_icon_buttons.dart';
+import 'package:wyatt_ui_kit_example/buttons/symbol_button/symbol_buttons.dart';
+
+class Buttons extends StatelessWidget {
+  const Buttons({super.key});
+
+  @override
+  Widget build(BuildContext context) => ListView(
+        cacheExtent: 1000,
+        children: [
+          const Gap(20),
+          Align(
+            child: Text(
+              'Buttons',
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+          ),
+          const Gap(20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: const [
+              FlatButtons(),
+              Gap(20),
+              SymbolButtons(),
+              Gap(20),
+              SimpleIconButtons(),
+            ],
+          ),
+          const Gap(20),
+          const Align(child: FileSelectionButtons()),
+        ],
+      );
+}

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

@@ -0,0 +1,121 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class FileSelectionButtons extends StatelessWidget {
+  const FileSelectionButtons({super.key});
+
+  Widget _leading() => const DecoratedBox(
+        decoration: BoxDecoration(
+          color: Constants.grey2,
+          borderRadius: BorderRadius.all(
+            Radius.circular(5),
+          ),
+        ),
+        child: Padding(
+          padding: EdgeInsets.all(8),
+          child: Icon(
+            Icons.file_upload_outlined,
+            color: Colors.white,
+          ),
+        ),
+      );
+
+  @override
+  Widget build(BuildContext context) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'FileSelection Buttons',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Ajouter un fichier',
+            ),
+            subTitle: const TextWrapper('Taille max: 20 Mo'),
+          ),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Enabled',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.enable()
+            ..bloc.freeze(),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Disabled',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.disable()
+            ..bloc.freeze(),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Hovered',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.onMouseEnter()
+            ..bloc.freeze(),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Focused',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.onFocus()
+            ..bloc.freeze(),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Tapped',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.onClickDown()
+            ..bloc.freeze(),
+          const Gap(20),
+          FileSelectionButton(
+            leading: _leading(),
+            title: const TextWrapper(
+              'Invalid',
+            ),
+            subTitle: const TextWrapper('Subtitle'),
+          )
+            ..bloc.invalidate()
+            ..bloc.freeze(),
+          const Gap(20),
+        ],
+      );
+}

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

@@ -0,0 +1,81 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class FlatButtons extends StatelessWidget {
+  const FlatButtons({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Flat Buttons',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Voir notre savoir faire'),
+            ),
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Enabled'),
+            )
+              ..bloc.enable()
+              ..bloc.freeze(),
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Disabled'),
+            )
+              ..bloc.disable()
+              ..bloc.freeze(),
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Hovered'),
+            )
+              ..bloc.onMouseEnter()
+              ..bloc.freeze(),
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Focused'),
+            )
+              ..bloc.onFocus()
+              ..bloc.freeze(),
+          ),
+          const Gap(20),
+          Center(
+            child: FlatButton(
+              label: const TextWrapper('Tapped'),
+            )
+              ..bloc.onClickDown()
+              ..bloc.freeze(),
+          ),
+          const Gap(20),
+        ],
+      );
+}

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

@@ -0,0 +1,112 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class SimpleIconButtons extends StatelessWidget {
+  const SimpleIconButtons({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'SimpleIcon Buttons',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          ),
+          const Gap(20),
+          Text(
+            'Enabled',
+            style: Theme.of(context).textTheme.labelMedium,
+          ),
+          const Gap(10),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          )
+            ..bloc.enable()
+            ..bloc.freeze(),
+          const Gap(20),
+          Text(
+            'Disabled',
+            style: Theme.of(context).textTheme.labelMedium,
+          ),
+          const Gap(10),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          )
+            ..bloc.disable()
+            ..bloc.freeze(),
+          const Gap(20),
+          Text(
+            'Hovered',
+            style: Theme.of(context).textTheme.labelMedium,
+          ),
+          const Gap(10),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          )
+            ..bloc.onMouseEnter()
+            ..bloc.freeze(),
+          const Gap(20),
+          Text(
+            'Focused',
+            style: Theme.of(context).textTheme.labelMedium,
+          ),
+          const Gap(10),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          )
+            ..bloc.onFocus()
+            ..bloc.freeze(),
+          const Gap(20),
+          Text(
+            'Tapped',
+            style: Theme.of(context).textTheme.labelMedium,
+          ),
+          const Gap(10),
+          SimpleIconButton(
+            icon: const Icon(
+              Icons.storm_outlined,
+              size: 17,
+            ),
+          )
+            ..bloc.onClickDown()
+            ..bloc.freeze(),
+          const Gap(20),
+        ],
+      );
+}

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

@@ -0,0 +1,102 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class SymbolButtons extends StatelessWidget {
+  const SymbolButtons({super.key});
+
+  Icon _icon(BuildContext context) => Icon(
+        Icons.android,
+        size: 25,
+        color: (Theme.of(context).colorScheme.brightness == Brightness.light)
+            ? Constants.dark
+            : Constants.white,
+      );
+
+  @override
+  Widget build(BuildContext context) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Symbol Buttons',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Text'),
+            icon: _icon(context),
+          ),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Enabled'),
+            icon: _icon(context),
+          )
+            ..bloc.enable()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Disabled'),
+            icon: _icon(context),
+          )
+            ..bloc.disable()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Hovered'),
+            icon: _icon(context),
+          )
+            ..bloc.onMouseEnter()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Focused'),
+            icon: _icon(context),
+          )
+            ..bloc.onFocus()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Tapped'),
+            icon: _icon(context),
+          )
+            ..bloc.onClickDown()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Selected'),
+            icon: _icon(context),
+          )
+            ..bloc.select()
+            ..bloc.freeze(),
+          const Gap(20),
+          DecoratedBox(
+            decoration: BoxDecoration(
+              border: Border.all(color: Constants.red1),
+            ),
+            child: SymbolButton(
+              label: const TextWrapper('Trigger zone'),
+              icon: _icon(context),
+            ),
+          ),
+          const Gap(20),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/cards/cards.dart

@@ -1,22 +1,33 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_kit_example/cards/information_card/information_cards.dart';
+import 'package:wyatt_ui_kit_example/cards/portfolio_card/portfolio_cards.dart';
+import 'package:wyatt_ui_kit_example/cards/quote_card/quote_cards.dart';
+import 'package:wyatt_ui_kit_example/cards/skill_card/skill_cards.dart';
 
 class Cards extends StatelessWidget {
   const Cards({super.key});
 
   @override
-  Widget build(BuildContext context) => Column(
+  Widget build(BuildContext context) => ListView(
+        cacheExtent: 1000,
         children: [
-          Text(
+          const Gap(20),
+          Align(
+            child: Text(
               'Cards',
-            style: Theme.of(context)
-                .textTheme
-                .titleLarge!
-                .copyWith(color: Colors.white),
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
           ),
           const Gap(20),
           const InformationCards(),
+          const Gap(20),
+          const PortfolioCards(),
+          const Gap(20),
+          const QuoteCards(),
+          const Gap(20),
+          const SkillCards(),
+          const Gap(20),
         ],
       );
 }

packages/wyatt_ui_kit/example/lib/cards/information_card/information_cards.dart

@@ -11,13 +11,11 @@ class InformationCards extends StatelessWidget {
         children: [
           Text(
             'Information Cards',
-            style: Theme.of(context)
-                .textTheme
-                .titleMedium!
-                .copyWith(color: Colors.white),
+            style: Theme.of(context).textTheme.titleMedium,
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               InformationCard(
@@ -48,7 +46,7 @@ class InformationCards extends StatelessWidget {
                   child: Container(
                     decoration: const BoxDecoration(
                       image: DecorationImage(
-                        image: AssetImage('assets/asset_1.png'),
+                        image: AssetImage('assets/images/asset_1.png'),
                         fit: BoxFit.fitHeight,
                         alignment: Alignment.centerRight,
                       ),
@@ -80,6 +78,7 @@ class InformationCards extends StatelessWidget {
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               InformationCard(
@@ -113,7 +112,7 @@ class InformationCards extends StatelessWidget {
                   child: Container(
                     decoration: const BoxDecoration(
                       image: DecorationImage(
-                        image: AssetImage('assets/asset_1.png'),
+                        image: AssetImage('assets/images/asset_1.png'),
                         fit: BoxFit.fitHeight,
                         alignment: Alignment.centerRight,
                       ),
@@ -126,9 +125,9 @@ class InformationCards extends StatelessWidget {
                 axis: Axis.horizontal,
                 title: TextWrapper.text('Flutter'),
                 subtitle: 'One single code base.'.wrap(
-                  gradient: [Colors.blue, Colors.green],
+                  // gradient: [Colors.blue, Colors.green],
                   style: const TextStyle(
-                    fontWeight: FontWeight.w500,
+                    fontWeight: FontWeight.bold,
                   ),
                 ),
                 body: TextWrapper.text(

packages/wyatt_ui_kit/example/lib/cards/portfolio_card/portfolio_cards.dart

@@ -0,0 +1,176 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class PortfolioCards extends StatelessWidget {
+  const PortfolioCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Portfolio Cards',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
+                ctas: [
+                  CupertinoButton(
+                    color: Theme.of(context).primaryColor,
+                    onPressed: () {},
+                    child: const Text('En savoir plus >'),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+              const Gap(20),
+              PortfolioCard(
+                showImagesOnTop: true,
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
+                ctas: [
+                  CupertinoButton(
+                    color: Theme.of(context).primaryColor,
+                    onPressed: () {},
+                    child: const Text('En savoir plus >'),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+              )
+            ],
+          ),
+          const Gap(20),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper('Flutter'),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
+                ctas: [
+                  CupertinoButton(
+                    color: Theme.of(context).primaryColor,
+                    onPressed: () {},
+                    child: const Text('En savoir plus >'),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+              const Gap(20),
+              PortfolioCard(
+                logo: const FlutterLogo(
+                  size: 50,
+                ),
+                projectName: const TextWrapper(
+                  'Flutter',
+                  gradient: [
+                    Colors.blue,
+                    Colors.green,
+                  ],
+                ),
+                subtitle: const TextWrapper('Mobile / Web / Macos.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
+                ctas: [
+                  CupertinoButton(
+                    color: Theme.of(context).primaryColor,
+                    onPressed: () {},
+                    child: const Text('En savoir plus >'),
+                  ),
+                ],
+                assets: [
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/images/mockup_2.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  ),
+                  Image.asset(
+                    'assets/images/mockup_1.png',
+                    alignment: Alignment.topCenter,
+                    fit: BoxFit.cover,
+                  )
+                ],
+                keyword: const [
+                  TextWrapper('UI Design'),
+                  TextWrapper('Developpement'),
+                  TextWrapper('Deploiement')
+                ],
+              ),
+            ],
+          ),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart

@@ -0,0 +1,64 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class QuoteCards extends StatelessWidget {
+  const QuoteCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Quote Cards',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              QuoteCard(
+                quote: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                        'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                        'quis elit ut amet velit. Incididunt fugiat proident '
+                        'proident deserunt tempor Lorem cillum qui do '
+                        'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
+                    .wrap(),
+              ),
+              const Gap(20),
+              QuoteCard(
+                quote: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                        'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                        'quis elit ut amet velit. Incididunt fugiat proident '
+                        'proident deserunt tempor Lorem cillum qui do '
+                        'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
+                    .wrap(gradient: [Colors.red, Colors.orange]),
+                avatar: const FlutterLogo(
+                  size: 40,
+                ),
+                name: 'John Doe'.wrap(),
+                subtitle: 'Agence anonyme'.wrap(),
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/cards/skill_card/skill_cards.dart

@@ -0,0 +1,83 @@
+// 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:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class SkillCards extends StatelessWidget {
+  const SkillCards({super.key});
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          Text(
+            'Skill Cards',
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+          const Gap(20),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              SkillCard(
+                gradient: const [Colors.red, Colors.orange],
+                icon: Icons.ac_unit_sharp,
+                title: 'Lorem Ipsum'.wrap(),
+                description: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                        'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                        'quis elit ut amet velit. Incididunt fugiat proident '
+                        'proident deserunt tempor Lorem cillum qui do '
+                        'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
+                    .wrap(),
+                skills: [
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text(
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute ',
+                  ),
+                ],
+              ),
+              const Gap(20),
+              SkillCard(
+                gradient: const [Colors.blue, Colors.green],
+                icon: Icons.ac_unit_sharp,
+                title: 'Lorem Ipsum'.wrap(),
+                description: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                        'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                        'quis elit ut amet velit. Incididunt fugiat proident '
+                        'proident deserunt tempor Lorem cillum qui do '
+                        'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
+                    .wrap(),
+                skills: [
+                  TextWrapper.text('Firebase'),
+                  const TextWrapper(
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute ',
+                    gradient: [Colors.red, Colors.orange],
+                  ),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                  TextWrapper.text('Firebase'),
+                ],
+              ),
+            ],
+          ),
+          const Gap(20),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -0,0 +1,101 @@
+import 'package:adaptive_theme/adaptive_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_kit_example/buttons/buttons.dart';
+import 'package:wyatt_ui_kit_example/cards/cards.dart';
+import 'package:wyatt_ui_kit_example/theme/themes.dart';
+
+const String title = 'Wyatt UIKit Example';
+
+class Home extends StatefulWidget {
+  const Home({super.key, this.forceIndex = 0});
+
+  final int forceIndex;
+
+  @override
+  State<Home> createState() => _HomeState();
+}
+
+class _HomeState extends State<Home> {
+  final List<Widget> pages = const [Cards(), Buttons()];
+
+  int currentIndex = 0;
+
+  @override
+  void initState() {
+    currentIndex = widget.forceIndex;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        drawer: Drawer(
+          child: ListView(
+            padding: EdgeInsets.zero,
+            children: [
+              ListTile(
+                title: const Text('Cards'),
+                onTap: () {
+                  if (currentIndex != 0) {
+                    setState(() {
+                      currentIndex = 0;
+                    });
+                    Navigator.pop(context);
+                  }
+                },
+              ),
+              ListTile(
+                title: const Text('Buttons'),
+                onTap: () {
+                  if (currentIndex != 1) {
+                    setState(() {
+                      currentIndex = 1;
+                    });
+                    Navigator.pop(context);
+                  }
+                },
+              ),
+            ],
+          ),
+        ),
+        appBar: AppBar(
+          title: const Text(title),
+          actions: [
+            Row(
+              children: [
+                const Text('Mode'),
+                Switch.adaptive(
+                  value:
+                      AdaptiveTheme.of(context).brightness == Brightness.dark,
+                  onChanged: (_) {
+                    AdaptiveTheme.of(context).brightness == Brightness.light
+                        ? AdaptiveTheme.of(context).setDark()
+                        : AdaptiveTheme.of(context).setLight();
+                  },
+                ),
+              ],
+            ),
+            const Gap(30),
+            Row(
+              children: [
+                const Text('Studio'),
+                Switch.adaptive(
+                  value: Themes.currentThemeIndex == 1,
+                  onChanged: (_) {
+                    setState(() {
+                      Themes.currentThemeIndex =
+                          (Themes.currentThemeIndex == 1) ? 0 : 1;
+                    });
+                    Themes.auto(context);
+                  },
+                ),
+              ],
+            )
+          ],
+        ),
+        body: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: pages[currentIndex],
+        ),
+      );
+}

packages/wyatt_ui_kit/example/lib/main.dart

@@ -14,44 +14,49 @@
 // 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/cupertino.dart';
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:wyatt_ui_kit_example/cards/cards.dart';
+import 'package:wyatt_ui_kit_example/home.dart';
+import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
 void main(List<String> args) {
-  runApp(const App());
+  const forcePage = int.fromEnvironment('PAGE');
+  const forceTheme = int.fromEnvironment('THEME');
+  Themes.currentThemeIndex = forceTheme;
+  runApp(
+    const App(
+      defaultPage: forcePage,
+      defaultTheme: forceTheme,
+    ),
+  );
 }
 
 class App extends StatelessWidget {
-  const App({super.key});
+  const App({required this.defaultPage, required this.defaultTheme, super.key});
 
-  static const String title = 'Wyatt Ui Kit Example';
+  final int defaultPage;
+  final int defaultTheme;
 
   @override
-  Widget build(BuildContext context) => CupertinoApp(
+  Widget build(BuildContext context) => AdaptiveTheme(
+        initial: AdaptiveThemeMode.light,
+        light: Themes.lightFromTheme(defaultTheme),
+        dark: Themes.darkFromTheme(defaultTheme),
+        builder: (light, dark) => MaterialApp(
           localizationsDelegates: const [
             GlobalMaterialLocalizations.delegate,
             GlobalWidgetsLocalizations.delegate,
             GlobalCupertinoLocalizations.delegate,
           ],
-        theme: const CupertinoThemeData(
-          primaryColor: Colors.blue,
-        ),
+          theme: light,
+          darkTheme: dark,
           supportedLocales: const [
             Locale('fr', ''),
           ],
           title: title,
-        home: CupertinoPageScaffold(
-          navigationBar: const CupertinoNavigationBar(
-            middle: Text(title),
-          ),
-          child: Padding(
-            padding: const EdgeInsets.all(8),
-            child: ListView(
-              shrinkWrap: true,
-              children: const [Cards()],
-            ),
+          home: Home(
+            forceIndex: defaultPage,
           ),
         ),
       );

packages/wyatt_ui_kit/example/lib/theme/constants.dart

@@ -0,0 +1,46 @@
+// 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/widgets.dart';
+
+abstract class Constants {
+  static const white = Color(0xFFFFFFFF);
+  static const dark = Color(0xFF383C40);
+
+  static const blue1 = Color(0xFF3C97FB);
+  static const blue2 = Color(0xFF446DF4);
+  static const blue3 = Color(0xFF1A84F7);
+  static const blue4 = Color(0xFF1344E4);
+
+  static const grey1 = Color(0xFF60656A);
+  static const grey2 = Color(0xFF383C40);
+
+  static const grey3 = Color(0xFF16191D);
+  static const grey4 = Color(0xFF33373E);
+
+  static const green1 = Color(0xFF50CE99);
+  static const green2 = Color(0xFF339572);
+
+  static const red1 = Color(0xFFFB5E3C);
+  static const red2 = Color(0xFFF44464);
+
+  static const blueGradient = [blue1, blue2];
+  static const blueDarkGradient = [blue3, blue4];
+  static const greyGradient = [grey1, grey2];
+  static const greyDarkGradient = [grey3, grey4];
+  static const greenGradient = [green1, green2];
+  static const redGradient = [red1, red2];
+}

packages/wyatt_ui_kit/example/lib/theme/file_selection_button_theme.dart

@@ -0,0 +1,172 @@
+// 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:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class FileSelectionButtonTheme extends FileSelectionButtonThemeExtension {
+  const FileSelectionButtonTheme({
+    super.disabledStyle,
+    super.focusedStyle,
+    super.hoveredStyle,
+    super.normalStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+    super.invalidStyle,
+  });
+
+  factory FileSelectionButtonTheme.light() {
+    final style = FileSelectionButtonStyle(
+      title: GoogleFonts.montserrat(
+        fontSize: 16,
+        fontWeight: FontWeight.w400,
+      ),
+      subTitle: GoogleFonts.montserrat(
+        fontSize: 11,
+        fontWeight: FontWeight.w400,
+      ),
+      radius: BorderRadius.circular(12),
+      padding: const EdgeInsets.all(13),
+      foregroundColors: const MultiColor.single(Constants.grey2),
+      backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
+      borderColors: const MultiColor(Constants.greyGradient),
+      stroke: 2,
+    );
+    return FileSelectionButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        foregroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Constants.white),
+        borderColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      hoveredStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      focusedStyle: style.copyWith(stroke: 4),
+      tappedStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      invalidStyle: style.copyWith(
+        subTitle: GoogleFonts.montserrat(
+          fontSize: 11,
+          fontWeight: FontWeight.w400,
+          color: Constants.red1,
+        ),
+        borderColors: const MultiColor(Constants.redGradient),
+      ),
+      // Unused
+      selectedStyle: style.copyWith(
+        foregroundColors: const MultiColor.single(Constants.grey2),
+        borderColors: const MultiColor(Constants.greenGradient),
+      ),
+    );
+  }
+
+  factory FileSelectionButtonTheme.dark() {
+    final style = FileSelectionButtonStyle(
+      title: GoogleFonts.montserrat(
+        fontSize: 16,
+        fontWeight: FontWeight.w400,
+      ),
+      subTitle: GoogleFonts.montserrat(
+        fontSize: 11,
+        fontWeight: FontWeight.w400,
+      ),
+      radius: BorderRadius.circular(12),
+      padding: const EdgeInsets.all(13),
+      foregroundColors: const MultiColor.single(Constants.white),
+      backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
+      borderColors: const MultiColor(Constants.greyGradient),
+      stroke: 1,
+    );
+    return FileSelectionButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        foregroundColors: const MultiColor.single(Constants.grey1),
+        backgroundColors: const MultiColor.single(Constants.grey4),
+      ),
+      hoveredStyle: style.copyWith(
+        borderColors: const MultiColor.single(Constants.white),
+      ),
+      focusedStyle: style.copyWith(stroke: 3),
+      tappedStyle: style.copyWith(
+        backgroundColors: const MultiColor(Constants.greyDarkGradient),
+      ),
+      invalidStyle: style.copyWith(
+        subTitle: GoogleFonts.montserrat(
+          fontSize: 11,
+          fontWeight: FontWeight.w400,
+          color: Constants.red1,
+        ),
+        borderColors: const MultiColor(Constants.redGradient),
+      ),
+      // Unused
+      selectedStyle: style.copyWith(
+        foregroundColors: const MultiColor.single(Constants.white),
+        borderColors: const MultiColor(Constants.greenGradient),
+      ),
+    );
+  }
+
+  @override
+  ThemeExtension<FileSelectionButtonThemeExtension> copyWith({
+    FileSelectionButtonStyle? disabledStyle,
+    FileSelectionButtonStyle? focusedStyle,
+    FileSelectionButtonStyle? hoveredStyle,
+    FileSelectionButtonStyle? normalStyle,
+    FileSelectionButtonStyle? tappedStyle,
+    FileSelectionButtonStyle? selectedStyle,
+    FileSelectionButtonStyle? invalidStyle,
+  }) =>
+      FileSelectionButtonTheme(
+        disabledStyle: disabledStyle ?? this.disabledStyle,
+        focusedStyle: focusedStyle ?? this.focusedStyle,
+        hoveredStyle: hoveredStyle ?? this.hoveredStyle,
+        normalStyle: normalStyle ?? this.normalStyle,
+        tappedStyle: tappedStyle ?? this.tappedStyle,
+        selectedStyle: selectedStyle ?? this.selectedStyle,
+        invalidStyle: invalidStyle ?? this.invalidStyle,
+      );
+
+  @override
+  ThemeExtension<FileSelectionButtonThemeExtension> lerp(
+    covariant ThemeExtension<FileSelectionButtonThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! FileSelectionButtonTheme) {
+      return this;
+    }
+    return FileSelectionButtonTheme(
+      disabledStyle:
+          FileSelectionButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
+      focusedStyle:
+          FileSelectionButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
+      hoveredStyle:
+          FileSelectionButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
+      normalStyle:
+          FileSelectionButtonStyle.lerp(normalStyle, other.normalStyle, t),
+      tappedStyle:
+          FileSelectionButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
+      selectedStyle:
+          FileSelectionButtonStyle.lerp(selectedStyle, other.selectedStyle, t),
+      invalidStyle:
+          FileSelectionButtonStyle.lerp(invalidStyle, other.invalidStyle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/lib/theme/flat_button_theme.dart

@@ -0,0 +1,153 @@
+// 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:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class FlatButtonTheme extends FlatButtonThemeExtension {
+  const FlatButtonTheme({
+    super.disabledStyle,
+    super.focusedStyle,
+    super.hoveredStyle,
+    super.normalStyle,
+    super.tappedStyle,
+  });
+
+  factory FlatButtonTheme.light() {
+    final style = FlatButtonStyle(
+      label: GoogleFonts.montserrat(
+        fontSize: 18,
+        fontWeight: FontWeight.w600,
+      ),
+      radius: BorderRadius.circular(15),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor(Constants.blueGradient),
+      backgroundColors: const MultiColor.single(Constants.white),
+      borderColors: const MultiColor(Constants.blueGradient),
+      stroke: 3,
+    );
+    return FlatButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: Constants.blue1.withOpacity(0.4),
+        ),
+        foregroundColors: MultiColor.single(Constants.blue1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Constants.white),
+        borderColors: MultiColor.single(Constants.blue1.withOpacity(0.4)),
+        stroke: 1,
+      ),
+      hoveredStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: Constants.white,
+        ),
+        foregroundColors: const MultiColor.single(Constants.white),
+        backgroundColors: const MultiColor(Constants.blueGradient),
+      ),
+      focusedStyle: style.copyWith(stroke: 5),
+      tappedStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: Constants.white,
+        ),
+        foregroundColors: const MultiColor.single(Constants.white),
+        backgroundColors: const MultiColor(Constants.blueDarkGradient),
+        borderColors: const MultiColor(Constants.blueDarkGradient),
+      ),
+    );
+  }
+
+  factory FlatButtonTheme.dark() {
+    final style = FlatButtonStyle(
+      label: GoogleFonts.montserrat(
+        fontSize: 18,
+        fontWeight: FontWeight.w600,
+      ),
+      radius: BorderRadius.circular(15),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor.single(Constants.white),
+      backgroundColors: const MultiColor.single(Constants.dark),
+      borderColors: const MultiColor(Constants.blueGradient),
+      stroke: 3,
+    );
+    return FlatButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 18,
+          fontWeight: FontWeight.w600,
+          color: Constants.grey1,
+        ),
+        foregroundColors: const MultiColor.single(Constants.grey1),
+        backgroundColors: const MultiColor.single(Constants.grey4),
+        borderColors: const MultiColor(Constants.greyGradient),
+        stroke: 1,
+      ),
+      hoveredStyle: style.copyWith(
+        foregroundColors: const MultiColor.single(Constants.white),
+        backgroundColors: const MultiColor(Constants.blueGradient),
+      ),
+      focusedStyle: style.copyWith(stroke: 5),
+      tappedStyle: style.copyWith(
+        foregroundColors: const MultiColor.single(Constants.white),
+        backgroundColors: const MultiColor(Constants.blueDarkGradient),
+        borderColors: const MultiColor(Constants.blueDarkGradient),
+      ),
+    );
+  }
+
+  @override
+  ThemeExtension<FlatButtonThemeExtension> copyWith({
+    FlatButtonStyle? disabledStyle,
+    FlatButtonStyle? focusedStyle,
+    FlatButtonStyle? hoveredStyle,
+    FlatButtonStyle? normalStyle,
+    FlatButtonStyle? tappedStyle,
+  }) =>
+      FlatButtonTheme(
+        disabledStyle: disabledStyle ?? this.disabledStyle,
+        focusedStyle: focusedStyle ?? this.focusedStyle,
+        hoveredStyle: hoveredStyle ?? this.hoveredStyle,
+        normalStyle: normalStyle ?? this.normalStyle,
+        tappedStyle: tappedStyle ?? this.tappedStyle,
+      );
+
+  @override
+  ThemeExtension<FlatButtonThemeExtension> lerp(
+    covariant ThemeExtension<FlatButtonThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! FlatButtonTheme) {
+      return this;
+    }
+    return FlatButtonTheme(
+      disabledStyle:
+          FlatButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
+      focusedStyle: FlatButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
+      hoveredStyle: FlatButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
+      normalStyle: FlatButtonStyle.lerp(normalStyle, other.normalStyle, t),
+      tappedStyle: FlatButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/lib/theme/simple_icon_button_theme.dart

@@ -0,0 +1,114 @@
+// 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';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class SimpleIconButtonTheme extends SimpleIconButtonThemeExtension {
+  const SimpleIconButtonTheme({
+    super.disabledStyle,
+    super.focusedStyle,
+    super.hoveredStyle,
+    super.normalStyle,
+    super.tappedStyle,
+  });
+
+  factory SimpleIconButtonTheme.light() {
+    final style = SimpleIconButtonStyle(
+      dimension: 30,
+      radius: BorderRadius.circular(5),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(Constants.dark),
+      backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.2)),
+    );
+    return SimpleIconButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        foregroundColors: MultiColor.single(Constants.dark.withOpacity(0.4)),
+      ),
+      hoveredStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      focusedStyle: style,
+      tappedStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.5)),
+      ),
+    );
+  }
+
+  factory SimpleIconButtonTheme.dark() {
+    final style = SimpleIconButtonStyle(
+      dimension: 30,
+      radius: BorderRadius.circular(5),
+      padding: const EdgeInsets.all(5),
+      foregroundColors: const MultiColor.single(Constants.white),
+      backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.2)),
+    );
+    return SimpleIconButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        foregroundColors: MultiColor.single(Constants.white.withOpacity(0.4)),
+      ),
+      hoveredStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.4)),
+      ),
+      focusedStyle: style,
+      tappedStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey3.withOpacity(0.5)),
+      ),
+    );
+  }
+
+  @override
+  ThemeExtension<SimpleIconButtonThemeExtension> copyWith({
+    SimpleIconButtonStyle? disabledStyle,
+    SimpleIconButtonStyle? focusedStyle,
+    SimpleIconButtonStyle? hoveredStyle,
+    SimpleIconButtonStyle? normalStyle,
+    SimpleIconButtonStyle? tappedStyle,
+  }) =>
+      SimpleIconButtonTheme(
+        disabledStyle: disabledStyle ?? this.disabledStyle,
+        focusedStyle: focusedStyle ?? this.focusedStyle,
+        hoveredStyle: hoveredStyle ?? this.hoveredStyle,
+        normalStyle: normalStyle ?? this.normalStyle,
+        tappedStyle: tappedStyle ?? this.tappedStyle,
+      );
+
+  @override
+  ThemeExtension<SimpleIconButtonThemeExtension> lerp(
+    covariant ThemeExtension<SimpleIconButtonThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! SimpleIconButtonTheme) {
+      return this;
+    }
+    return SimpleIconButtonTheme(
+      disabledStyle:
+          SimpleIconButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
+      focusedStyle:
+          SimpleIconButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
+      hoveredStyle:
+          SimpleIconButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
+      normalStyle:
+          SimpleIconButtonStyle.lerp(normalStyle, other.normalStyle, t),
+      tappedStyle:
+          SimpleIconButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/lib/theme/symbol_button_theme.dart

@@ -0,0 +1,157 @@
+// 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:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class SymbolButtonTheme extends SymbolButtonThemeExtension {
+  const SymbolButtonTheme({
+    super.disabledStyle,
+    super.focusedStyle,
+    super.hoveredStyle,
+    super.normalStyle,
+    super.tappedStyle,
+    super.selectedStyle,
+  });
+
+  factory SymbolButtonTheme.light() {
+    final style = SymbolButtonStyle(
+      label: GoogleFonts.montserrat(
+        fontSize: 14,
+        fontWeight: FontWeight.w400,
+      ),
+      dimension: 60,
+      radius: BorderRadius.circular(12),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor.single(Constants.grey2),
+      backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
+      borderColors: const MultiColor(Constants.greyGradient),
+      stroke: 2,
+    );
+    return SymbolButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: Constants.grey1,
+        ),
+        foregroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+        backgroundColors: const MultiColor.single(Constants.white),
+        borderColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      hoveredStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      focusedStyle: style.copyWith(stroke: 4),
+      tappedStyle: style.copyWith(
+        backgroundColors: MultiColor.single(Constants.grey1.withOpacity(0.4)),
+      ),
+      selectedStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 14,
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(Constants.grey2),
+        borderColors: const MultiColor(Constants.greenGradient),
+      ),
+    );
+  }
+
+  factory SymbolButtonTheme.dark() {
+    final style = SymbolButtonStyle(
+      label: GoogleFonts.montserrat(
+        fontSize: 14,
+        fontWeight: FontWeight.w400,
+      ),
+      dimension: 60,
+      radius: BorderRadius.circular(12),
+      padding: const EdgeInsets.all(10),
+      foregroundColors: const MultiColor.single(Constants.white),
+      backgroundColors: MultiColor.single(Constants.white.withOpacity(0.04)),
+      borderColors: const MultiColor(Constants.greyGradient),
+      stroke: 2,
+    );
+    return SymbolButtonTheme(
+      normalStyle: style,
+      disabledStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: Constants.grey1,
+        ),
+        foregroundColors: const MultiColor.single(Constants.grey1),
+        backgroundColors: const MultiColor.single(Constants.grey4),
+      ),
+      hoveredStyle: style.copyWith(
+        backgroundColors: const MultiColor(Constants.greyDarkGradient),
+      ),
+      focusedStyle: style.copyWith(stroke: 4),
+      tappedStyle: style.copyWith(
+        backgroundColors: const MultiColor(Constants.greyDarkGradient),
+      ),
+      selectedStyle: style.copyWith(
+        label: GoogleFonts.montserrat(
+          fontSize: 14,
+          fontWeight: FontWeight.w600,
+        ),
+        foregroundColors: const MultiColor.single(Constants.white),
+        borderColors: const MultiColor(Constants.greenGradient),
+      ),
+    );
+  }
+
+  @override
+  ThemeExtension<SymbolButtonThemeExtension> copyWith({
+    SymbolButtonStyle? disabledStyle,
+    SymbolButtonStyle? focusedStyle,
+    SymbolButtonStyle? hoveredStyle,
+    SymbolButtonStyle? normalStyle,
+    SymbolButtonStyle? tappedStyle,
+    SymbolButtonStyle? selectedStyle,
+  }) =>
+      SymbolButtonTheme(
+        disabledStyle: disabledStyle ?? this.disabledStyle,
+        focusedStyle: focusedStyle ?? this.focusedStyle,
+        hoveredStyle: hoveredStyle ?? this.hoveredStyle,
+        normalStyle: normalStyle ?? this.normalStyle,
+        tappedStyle: tappedStyle ?? this.tappedStyle,
+        selectedStyle: selectedStyle ?? this.selectedStyle,
+      );
+
+  @override
+  ThemeExtension<SymbolButtonThemeExtension> lerp(
+    covariant ThemeExtension<SymbolButtonThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! SymbolButtonTheme) {
+      return this;
+    }
+    return SymbolButtonTheme(
+      disabledStyle:
+          SymbolButtonStyle.lerp(disabledStyle, other.disabledStyle, t),
+      focusedStyle: SymbolButtonStyle.lerp(focusedStyle, other.focusedStyle, t),
+      hoveredStyle: SymbolButtonStyle.lerp(hoveredStyle, other.hoveredStyle, t),
+      normalStyle: SymbolButtonStyle.lerp(normalStyle, other.normalStyle, t),
+      tappedStyle: SymbolButtonStyle.lerp(tappedStyle, other.tappedStyle, t),
+      selectedStyle:
+          SymbolButtonStyle.lerp(selectedStyle, other.selectedStyle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/lib/theme/themes.dart

@@ -0,0 +1,159 @@
+// 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:adaptive_theme/adaptive_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_kit_example/theme/file_selection_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme_extension.dart';
+
+/// Easely switch between Material and Studio themes.
+abstract class Themes {
+  static int currentThemeIndex = 0;
+
+  static List<Set<ThemeData>> themes = [
+    {materialLight, materialDark},
+    {studioLight, studioDark},
+  ];
+
+  static ThemeData lightFromTheme(int themeId) {
+    currentThemeIndex = themeId;
+    return themes[themeId].first;
+  }
+
+  static ThemeData darkFromTheme(int themeId) {
+    currentThemeIndex = themeId;
+    return themes[themeId].last;
+  }
+
+  static void auto(BuildContext context) {
+    if (currentThemeIndex == 1) {
+      return studio(context);
+    }
+    return material(context);
+  }
+
+  static void material(BuildContext context) {
+    AdaptiveTheme.of(context).setTheme(
+      light: materialLight,
+      dark: materialDark,
+    );
+  }
+
+  static void studio(BuildContext context) {
+    AdaptiveTheme.of(context).setTheme(
+      light: studioLight,
+      dark: studioDark,
+    );
+  }
+
+  static ThemeData get materialLight => ThemeData.light();
+
+  static ThemeData get studioLight => materialLight.copyWith(
+        appBarTheme: AppBarTheme(
+          foregroundColor: const Color.fromRGBO(36, 38, 42, 1),
+          backgroundColor: Colors.white,
+          titleTextStyle: GoogleFonts.montserrat(
+            fontSize: 18,
+            fontWeight: FontWeight.w500,
+            color: const Color.fromRGBO(36, 38, 42, 1),
+          ),
+        ),
+        scaffoldBackgroundColor: Colors.white,
+        extensions: <ThemeExtension<dynamic>>[
+          CustomCardColorExtension(
+            backgroundColors: const [
+              Color.fromRGBO(246, 246, 246, 1),
+            ],
+            secondaryBackgroundColors: Colors.white,
+            borderColor: const [
+              Color.fromRGBO(221, 224, 227, 1),
+              Color.fromRGBO(202, 204, 212, 1),
+            ],
+            title: GoogleFonts.montserrat(
+              fontSize: 24,
+              fontWeight: FontWeight.w500,
+              color: const Color.fromRGBO(36, 38, 42, 1),
+            ),
+            subtitle: GoogleFonts.montserrat(
+              fontSize: 15,
+              fontWeight: FontWeight.w300,
+              color: const Color.fromRGBO(36, 38, 42, 1),
+            ),
+            body: GoogleFonts.montserrat(
+              fontSize: 12,
+              fontWeight: FontWeight.w300,
+              height: 1.7,
+              color: const Color.fromRGBO(36, 38, 42, 1),
+            ),
+          ),
+          FlatButtonTheme.light(),
+          SymbolButtonTheme.light(),
+          SimpleIconButtonTheme.light(),
+          FileSelectionButtonTheme.light(),
+        ],
+      );
+
+  static ThemeData get materialDark => ThemeData.dark();
+
+  static ThemeData get studioDark => materialDark.copyWith(
+        appBarTheme: AppBarTheme(
+          foregroundColor: Colors.white,
+          backgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+          titleTextStyle: GoogleFonts.montserrat(
+            fontSize: 18,
+            fontWeight: FontWeight.w500,
+            color: Colors.white,
+          ),
+        ),
+        scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+        extensions: <ThemeExtension<dynamic>>[
+          CustomCardColorExtension(
+            secondaryBackgroundColors: Colors.white.withOpacity(0.04),
+            backgroundColors: [
+              Colors.white.withOpacity(0.04),
+            ],
+            borderColor: const [
+              Color.fromRGBO(96, 101, 106, 1),
+              Color.fromRGBO(56, 60, 64, 1),
+            ],
+            title: GoogleFonts.montserrat(
+              fontSize: 24,
+              fontWeight: FontWeight.w500,
+              color: Colors.white,
+            ),
+            subtitle: GoogleFonts.montserrat(
+              fontSize: 15,
+              fontWeight: FontWeight.w300,
+              color: Colors.white,
+            ),
+            body: GoogleFonts.montserrat(
+              fontSize: 12,
+              fontWeight: FontWeight.w300,
+              height: 1.7,
+              color: Colors.white,
+            ),
+          ),
+          FlatButtonTheme.dark(),
+          SymbolButtonTheme.dark(),
+          SimpleIconButtonTheme.dark(),
+          FileSelectionButtonTheme.dark(),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/theme_extension.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart' as ui_kit;
+
+class CustomCardColorExtension extends ui_kit.CardThemeExtension {
+  const CustomCardColorExtension({
+    super.backgroundColors,
+    super.secondaryBackgroundColors,
+    super.borderColor,
+    super.shadowColor,
+    super.body,
+    super.title,
+    super.subtitle,
+  });
+
+  @override
+  CustomCardColorExtension copyWith({
+    List<Color>? backgroundColors,
+    Color? secondaryBackgroundColors,
+    List<Color>? borderColor,
+    BoxShadow? shadowColor,
+    TextStyle? body,
+    TextStyle? title,
+    TextStyle? subtitle,
+  }) =>
+      CustomCardColorExtension(
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        secondaryBackgroundColors:
+            secondaryBackgroundColors ?? this.secondaryBackgroundColors,
+        borderColor: borderColor ?? this.borderColor,
+        body: body ?? this.body,
+        title: title ?? this.title,
+        subtitle: subtitle ?? this.subtitle,
+      );
+
+  @override
+  ThemeExtension<ui_kit.CardThemeExtension> lerp(
+    covariant ThemeExtension<ui_kit.CardThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! CustomCardColorExtension) {
+      return this;
+    }
+    return CustomCardColorExtension(
+      secondaryBackgroundColors: Color.lerp(
+        secondaryBackgroundColors,
+        other.secondaryBackgroundColors,
+        t,
+      ),
+      body: TextStyle.lerp(body, other.body, t),
+      title: TextStyle.lerp(title, other.title, t),
+      subtitle: TextStyle.lerp(subtitle, other.subtitle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/macos/Flutter/Flutter-Debug.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "ephemeral/Flutter-Generated.xcconfig"

packages/wyatt_ui_kit/example/macos/Flutter/Flutter-Release.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
 #include "ephemeral/Flutter-Generated.xcconfig"

packages/wyatt_ui_kit/example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,6 +5,10 @@
 import FlutterMacOS
 import Foundation
 
+import path_provider_foundation
+import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
 }

packages/wyatt_ui_kit/example/macos/Podfile

@@ -0,0 +1,40 @@
+platform :osx, '10.14'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'ephemeral', 'Flutter-Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure \"flutter pub get\" is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Flutter-Generated.xcconfig, then run \"flutter pub get\""
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_macos_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+  use_modular_headers!
+
+  flutter_install_all_macos_pods File.dirname(File.realpath(__FILE__))
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_macos_build_settings(target)
+  end
+end

packages/wyatt_ui_kit/example/macos/Podfile.lock

@@ -0,0 +1,30 @@
+PODS:
+  - FlutterMacOS (1.0.0)
+  - path_provider_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
+  - shared_preferences_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
+
+DEPENDENCIES:
+  - FlutterMacOS (from `Flutter/ephemeral`)
+  - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos`)
+  - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/macos`)
+
+EXTERNAL SOURCES:
+  FlutterMacOS:
+    :path: Flutter/ephemeral
+  path_provider_foundation:
+    :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos
+  shared_preferences_foundation:
+    :path: Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/macos
+
+SPEC CHECKSUMS:
+  FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
+  path_provider_foundation: 37748e03f12783f9de2cb2c4eadfaa25fe6d4852
+  shared_preferences_foundation: 297b3ebca31b34ec92be11acd7fb0ba932c822ca
+
+PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
+
+COCOAPODS: 1.11.3

packages/wyatt_ui_kit/example/macos/Runner.xcodeproj/project.pbxproj

@@ -26,6 +26,7 @@
 		33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F22044A3C60003C045 /* Assets.xcassets */; };
 		33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; };
 		33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; };
+		A5F9CB8747FE7FB1F2C756B2 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BFE88646077DE7272E46720D /* Pods_Runner.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -54,7 +55,7 @@
 /* Begin PBXFileReference section */
 		333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = "<group>"; };
 		335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = "<group>"; };
-		33CC10ED2044A3C60003C045 /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "example.app"; sourceTree = BUILT_PRODUCTS_DIR; };
+		33CC10ED2044A3C60003C045 /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		33CC10F02044A3C60003C045 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		33CC10F22044A3C60003C045 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Assets.xcassets; path = Runner/Assets.xcassets; sourceTree = "<group>"; };
 		33CC10F52044A3C60003C045 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/MainMenu.xib; sourceTree = "<group>"; };
@@ -66,8 +67,12 @@
 		33E51913231747F40026EE4D /* DebugProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = DebugProfile.entitlements; sourceTree = "<group>"; };
 		33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = "<group>"; };
 		33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = "<group>"; };
+		59A88CF037B2829342F969BD /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
+		6C156257C212AAC0F946DB4B /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = "<group>"; };
+		AC438DBB762194E86CC967B1 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
+		BFE88646077DE7272E46720D /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -75,6 +80,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				A5F9CB8747FE7FB1F2C756B2 /* Pods_Runner.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -99,6 +105,7 @@
 				33CEB47122A05771004F2AC0 /* Flutter */,
 				33CC10EE2044A3C60003C045 /* Products */,
 				D73912EC22F37F3D000D13A0 /* Frameworks */,
+				6AE7C512D58B6E237819CA94 /* Pods */,
 			);
 			sourceTree = "<group>";
 		};
@@ -145,9 +152,21 @@
 			path = Runner;
 			sourceTree = "<group>";
 		};
+		6AE7C512D58B6E237819CA94 /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				6C156257C212AAC0F946DB4B /* Pods-Runner.debug.xcconfig */,
+				59A88CF037B2829342F969BD /* Pods-Runner.release.xcconfig */,
+				AC438DBB762194E86CC967B1 /* Pods-Runner.profile.xcconfig */,
+			);
+			name = Pods;
+			path = Pods;
+			sourceTree = "<group>";
+		};
 		D73912EC22F37F3D000D13A0 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				BFE88646077DE7272E46720D /* Pods_Runner.framework */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -159,11 +178,13 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */;
 			buildPhases = (
+				411BD9D4C8DC9AC52284FE47 /* [CP] Check Pods Manifest.lock */,
 				33CC10E92044A3C60003C045 /* Sources */,
 				33CC10EA2044A3C60003C045 /* Frameworks */,
 				33CC10EB2044A3C60003C045 /* Resources */,
 				33CC110E2044A8840003C045 /* Bundle Framework */,
 				3399D490228B24CF009A79C7 /* ShellScript */,
+				D4EE7FCF15B3694CC588D1E5 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -271,6 +292,45 @@
 			shellPath = /bin/sh;
 			shellScript = "\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh && touch Flutter/ephemeral/tripwire";
 		};
+		411BD9D4C8DC9AC52284FE47 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Runner-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		D4EE7FCF15B3694CC588D1E5 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */

packages/wyatt_ui_kit/example/macos/Runner.xcworkspace/contents.xcworkspacedata

@@ -4,4 +4,7 @@
    <FileRef
       location = "group:Runner.xcodeproj">
    </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
 </Workspace>

packages/wyatt_ui_kit/example/macos/Runner/Release.entitlements

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>com.apple.security.network.client</key>
+	<true/>
 	<key>com.apple.security.app-sandbox</key>
 	<true/>
 </dict>

packages/wyatt_ui_kit/example/pubspec.yaml

@@ -10,10 +10,11 @@ environment:
 dependencies:
   flutter: { sdk: flutter }
 
-  flutter_localizations:
-    sdk: flutter
+  flutter_localizations: { sdk: flutter }
 
   gap: ^2.0.1
+  google_fonts: ^4.0.3
+  adaptive_theme: ^3.2.0
 
   wyatt_ui_kit:
     path: "../"
@@ -35,4 +36,5 @@ flutter:
   uses-material-design: true
 
   assets:
-    - ./assets/
+    - ./assets/images/
+    - ./assets/fonts/montserrat/

packages/wyatt_ui_kit/lib/src/components/buttons/buttons.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/file_selection_button.dart';
+export './flat_button/flat_button.dart';
+export './simple_icon_button/simple_icon_button.dart';
+export './symbol_button/symbol_button.dart';

packages/wyatt_ui_kit/lib/src/components/buttons/cubit/button_cubit.dart

@@ -0,0 +1,99 @@
+// 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 'dart:async';
+
+import 'package:equatable/equatable.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+
+part 'button_state.dart';
+
+class ButtonCubit extends Cubit<ButtonState> {
+  ButtonCubit() : super(const ButtonState.initial(ControlState.normal));
+
+  FutureOr<void> onMouseEnter() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.hovered));
+  }
+
+  FutureOr<void> onMouseLeave() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+
+    emit(state.copyWith(state: ControlState.normal));
+  }
+
+  FutureOr<void> onFocus() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.focused));
+  }
+
+  FutureOr<void> onUnfocus() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.normal));
+  }
+
+  FutureOr<void> onClickDown() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.tapped));
+  }
+
+  FutureOr<void> onClickUpIn() async {
+    if (state.isDisabled) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.hovered));
+  }
+
+  FutureOr<void> onClickUpOut() async {
+    if (state.isDisabled) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.normal));
+  }
+
+  FutureOr<void> disable() async {
+    if (state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.disabled));
+  }
+
+  FutureOr<void> enable() async {
+    if (state.isFreezed) {
+      return;
+    }
+    emit(state.copyWith(state: ControlState.normal));
+  }
+
+  FutureOr<void> freeze() async {
+    emit(state.copyWith(freezed: true));
+  }
+
+  FutureOr<void> unfreeze() async {
+    emit(state.copyWith(freezed: false));
+  }
+}

packages/wyatt_ui_kit/lib/src/components/buttons/cubit/button_state.dart

@@ -0,0 +1,71 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
+// 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/>.
+
+part of 'button_cubit.dart';
+
+class ButtonState extends Equatable {
+  const ButtonState({
+    required this.state,
+    required this.selected,
+    required this.invalid,
+    required this.freezed,
+  });
+
+  const ButtonState.initial(this.state)
+      : selected = false,
+        invalid = false,
+        freezed = false;
+
+  final ControlState state;
+
+  // Not in control state, because a button state can be
+  // a control state + extra state
+  // e.g : hover + invalid, or selected + tapped
+  final bool selected;
+  final bool invalid;
+  final bool freezed;
+
+  bool get isDisabled => state.isDisabled();
+  bool get isEnabled => state.isEnabled();
+  bool get isFocused => state.isFocused();
+  bool get isHovered => state.isHovered();
+  bool get isTapped => state.isTapped();
+
+  // only for consistence
+  bool get isSelected => selected;
+  bool get isInvalid => invalid;
+  bool get isFreezed => freezed;
+
+  @override
+  List<Object?> get props => [state, selected, invalid, freezed];
+
+  @override
+  bool? get stringify => true;
+
+  ButtonState copyWith({
+    ControlState? state,
+    bool? selected,
+    bool? invalid,
+    bool? freezed,
+  }) =>
+      ButtonState(
+        state: state ?? this.state,
+        selected: selected ?? this.selected,
+        invalid: invalid ?? this.invalid,
+        freezed: freezed ?? this.freezed,
+      );
+}

packages/wyatt_ui_kit/lib/src/components/buttons/cubit/invalid_button_cubit.dart

@@ -0,0 +1,68 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'dart:async';
+
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
+
+class InvalidButtonCubit extends ButtonCubit {
+  @override
+  FutureOr<void> onClickUpIn() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(
+        state: ControlState.hovered,
+      ),
+    );
+  }
+
+  @override
+  FutureOr<void> onClickUpOut() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(
+        state: ControlState.normal,
+      ),
+    );
+  }
+
+  FutureOr<void> invalidate() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(invalid: true),
+    );
+  }
+
+  FutureOr<void> fix() async {
+    if (state.isDisabled || state.isFreezed) {
+      return;
+    }
+
+    emit(
+      state.copyWith(invalid: false),
+    );
+  }
+}