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

@@ -25,7 +25,7 @@ class FileSelectionButtons extends StatelessWidget {
 
   Widget _leading() => const DecoratedBox(
         decoration: BoxDecoration(
-          color: Constants.grey3,
+          color: Constants.grey2,
           borderRadius: BorderRadius.all(
             Radius.circular(5),
           ),

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

@@ -23,6 +23,14 @@ 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,
@@ -34,75 +42,47 @@ class SymbolButtons extends StatelessWidget {
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Text'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           ),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Enabled'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.enable()
             ..bloc.freeze(),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Disabled'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.disable()
             ..bloc.freeze(),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Hovered'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.onMouseEnter()
             ..bloc.freeze(),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Focused'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.onFocus()
             ..bloc.freeze(),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Tapped'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.onClickDown()
             ..bloc.freeze(),
           const Gap(20),
           SymbolButton(
             label: const TextWrapper('Selected'),
-            icon: const Icon(
+            icon: _icon(context),
-              Icons.android,
-              size: 25,
-              color: Constants.white,
-            ),
           )
             ..bloc.select()
             ..bloc.freeze(),
@@ -113,11 +93,7 @@ class SymbolButtons extends StatelessWidget {
             ),
             child: SymbolButton(
               label: const TextWrapper('Trigger zone'),
-              icon: const Icon(
+              icon: _icon(context),
-                Icons.android,
-                size: 25,
-                color: Constants.white,
-              ),
             ),
           ),
           const Gap(20),

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(10),
+      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

@@ -64,6 +64,7 @@ class FlatButtonTheme extends FlatButtonThemeExtension {
         foregroundColors: const MultiColor.single(Constants.white),
         backgroundColors: const MultiColor(Constants.blueGradient),
       ),
+      focusedStyle: style.copyWith(stroke: 5),
       tappedStyle: style.copyWith(
         label: GoogleFonts.montserrat(
           fontSize: 18,
@@ -107,6 +108,7 @@ class FlatButtonTheme extends FlatButtonThemeExtension {
         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),

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

@@ -59,6 +59,7 @@ class SymbolButtonTheme extends SymbolButtonThemeExtension {
       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)),
       ),
@@ -101,6 +102,7 @@ class SymbolButtonTheme extends SymbolButtonThemeExtension {
       hoveredStyle: style.copyWith(
         backgroundColors: const MultiColor(Constants.greyDarkGradient),
       ),
+      focusedStyle: style.copyWith(stroke: 4),
       tappedStyle: style.copyWith(
         backgroundColors: const MultiColor(Constants.greyDarkGradient),
       ),

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

@@ -17,14 +17,16 @@
 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},
@@ -34,6 +36,7 @@ abstract class Themes {
     currentThemeIndex = themeId;
     return themes[themeId].first;
   }
+
   static ThemeData darkFromTheme(int themeId) {
     currentThemeIndex = themeId;
     return themes[themeId].last;
@@ -102,6 +105,8 @@ abstract class Themes {
           ),
           FlatButtonTheme.light(),
           SymbolButtonTheme.light(),
+          SimpleIconButtonTheme.light(),
+          FileSelectionButtonTheme.light(),
         ],
       );
 
@@ -147,6 +152,8 @@ abstract class Themes {
           ),
           FlatButtonTheme.dark(),
           SymbolButtonTheme.dark(),
+          SimpleIconButtonTheme.dark(),
+          FileSelectionButtonTheme.dark(),
         ],
       );
 }

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

@@ -221,7 +221,7 @@ class FileSelectionButtonScreen
                     children: [
                       if (leading != null) ...[
                         leading ?? const SizedBox.shrink(),
-                        Gap(style.padding?.horizontal ?? 10),
+                        Gap((style.padding?.horizontal ?? 10)/2),
                       ],
                       Column(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -239,7 +239,6 @@ class FileSelectionButtonScreen
                           ///
                           /// More infos in `negociate()` method
                           if (title != null) ...[
-                            Gap(style.padding?.vertical ?? 10),
                             Text(
                               title!.text,
                               style: title!.style ?? style.title,
@@ -266,7 +265,7 @@ class FileSelectionButtonScreen
                           ///
                           /// More infos in `negociate()` method
                           if (subTitle != null) ...[
-                            Gap(style.padding?.vertical ?? 10),
+                            const Gap(5),
                             Text(
                               subTitle!.text,
                               style: subTitle!.style ?? style.subTitle,