feat(ui_kit): add theme control in example

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

@@ -18,5 +18,4 @@ export 'enums/control_state.dart';
 export 'extensions/build_context_extensions.dart';
 export 'extensions/string_extension.dart';
 export 'mixins/copy_with_mixin.dart';
-export 'utils/multi_color.dart';
-export 'utils/text_wrapper.dart';
+export 'utils/utils.dart';

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

@@ -15,7 +15,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:flutter/material.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
 
 /// {@template theme_resolver}
 /// In charge of theme negotiation and merge.
@@ -72,7 +71,7 @@ abstract class ThemeResolver<S, T, E> {
     return previousPhaseValue;
   }
 
-  T? findExtension(BuildContext context) => context.themeExtension<T>();
+  T? findExtension(BuildContext context) => Theme.of(context).extension<T>();
 
   /// Choose most suitable style for a given context.
   S negotiate(BuildContext context, {E? extra}) {

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

@@ -26,6 +26,7 @@ abstract class ButtonComponent extends Component {
     this.selectedStyle,
     this.invalidStyle,
     this.onPressed,
+    this.themeResolver,
     super.key,
   });
 
@@ -52,4 +53,7 @@ abstract class ButtonComponent extends Component {
 
   /// 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/file_selection_button_component.dart

@@ -36,6 +36,7 @@ abstract class FileSelectionButtonComponent extends ButtonComponent
     super.selectedStyle,
     super.invalidStyle,
     super.onPressed,
+    super.themeResolver,
     super.key,
   });
 

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

@@ -34,6 +34,7 @@ abstract class FlatButtonComponent extends ButtonComponent
     super.focusedStyle,
     super.tappedStyle,
     super.onPressed,
+    super.themeResolver,
     super.key,
   });
 

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

@@ -31,6 +31,7 @@ abstract class SimpleIconButtonComponent extends ButtonComponent
     super.focusedStyle,
     super.tappedStyle,
     super.onPressed,
+    super.themeResolver,
     super.key,
   });
 

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

@@ -34,6 +34,7 @@ abstract class SymbolButtonComponent extends ButtonComponent
     super.tappedStyle,
     super.selectedStyle,
     super.onPressed,
+    super.themeResolver,
     super.key,
   });
 

packages/wyatt_ui_kit/example/README.md

@@ -3,7 +3,7 @@
 You can force the launch page. (For debug purposes).
 
 ```shell
-flutter run -d macos --dart-define PAGE=1
+flutter run -d macos --dart-define PAGE=1 --dart-define THEME=1
 ```
 
-> This will forces button page.
+> This will forces `Buttons` page with `Studio` theme

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

@@ -16,28 +16,17 @@
 
 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';
-
-const _color1 = Color(0xFF3C97FB);
-const _color2 = Color(0xFF446DF4);
-const _color3 = Color.fromARGB(255, 26, 132, 247);
-const _color4 = Color.fromARGB(255, 19, 68, 228);
-const _colors = [_color1, _color2];
-const _colorsDarken = [_color3, _color4];
-const _disabled = Color(0xFF6B7280);
-const _background = Color(0xFF16191D);
-const _disabledBackground = Color(0xFF16191D + 0x66FFFFFF);
-const _disabledColors = [Color(0xFF60656A), Color(0xFF383C40)];
-const _selectedColors = [Color(0xFF50CE99), Color(0xFF339572)];
-const _invalidColor = Color(0xFFFB5E3C);
+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: 2000,
+        cacheExtent: 1000,
         children: [
           const Gap(20),
           Align(
@@ -47,337 +36,19 @@ class Buttons extends StatelessWidget {
             ),
           ),
           const Gap(20),
-          Center(
-            child: FlatButton(
-              label: const TextWrapper('Voir notre savoir faire'),
-              normalStyle: const FlatButtonStyle(
-                foregroundColors: MultiColor(_colors),
-                backgroundColors: MultiColor.single(Colors.transparent),
-                borderColors: MultiColor(_colors),
-                stroke: 3,
-              ),
-              hoveredStyle: const FlatButtonStyle(
-                foregroundColors: MultiColor.single(Colors.white),
-                backgroundColors: MultiColor(_colors),
-                borderColors: MultiColor(_colors),
-                stroke: 3,
-              ),
-              tappedStyle: const FlatButtonStyle(
-                foregroundColors: MultiColor.single(Colors.white),
-                backgroundColors: MultiColor(_colorsDarken),
-                borderColors: MultiColor(_colorsDarken),
-                stroke: 3,
-              ),
-              prefix: const Icon(
-                Icons.arrow_forward_rounded,
-              ),
-              suffix: const Icon(
-                Icons.arrow_forward_rounded,
-              ),
-            ),
-          ),
-          const Gap(20),
-          FlatButton(
-            label: TextWrapper(
-              'Voir notre savoir faire',
-              style:
-                  context.textTheme.titleLarge?.copyWith(color: Colors.white),
-            ),
-            normalStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor(_colors),
-            ),
-            prefix: const Icon(
-              Icons.arrow_forward_rounded,
-              color: Colors.white,
-            ),
-            suffix: const Icon(
-              Icons.arrow_forward_rounded,
-              color: Colors.white,
-            ),
-          ),
-          const Gap(20),
-          ColoredBox(
-            color: _background,
-            child: Center(
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Column(
-                    children: [
-                      const Gap(20),
-                      FlatButton(
-                        label: TextWrapper(
-                          'Démarrer mon projet',
-                          style: context.textTheme.titleLarge
-                              ?.copyWith(color: _disabled),
-                        ),
-                        normalStyle: const FlatButtonStyle(
-                          borderColors: MultiColor(_disabledColors),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 1,
-                        ),
-                      ),
-                      const Gap(20),
-                      FlatButton(
-                        label: TextWrapper(
-                          'Démarrer mon projet',
-                          style: context.textTheme.titleLarge
-                              ?.copyWith(color: Colors.white),
-                        ),
-                        normalStyle: const FlatButtonStyle(
-                          backgroundColors: MultiColor(_colors),
-                        ),
-                      ),
-                      const Gap(20),
-                    ],
-                  ),
-                  const Gap(20),
-                  Column(
-                    children: [
-                      const Gap(20),
-                      FlatButton(
-                        label: TextWrapper(
-                          'Aller voir nos réalisations',
-                          style: context.textTheme.titleLarge
-                              ?.copyWith(color: Colors.white),
-                        ),
-                        normalStyle: const FlatButtonStyle(
-                          borderColors: MultiColor(_colors),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 3,
-                        ),
-                        suffix: const Icon(
-                          Icons.arrow_forward_rounded,
-                          color: Colors.white,
-                        ),
-                      ),
-                      const Gap(20),
-                      FlatButton(
-                        label: TextWrapper(
-                          'Aller voir nos réalisations',
-                          style: context.textTheme.titleLarge
-                              ?.copyWith(color: Colors.white),
-                        ),
-                        normalStyle: const FlatButtonStyle(
-                          backgroundColors: MultiColor(_colors),
-                        ),
-                        suffix: const Icon(
-                          Icons.arrow_forward_rounded,
-                          color: Colors.white,
-                        ),
-                      ),
-                      const Gap(20),
-                    ],
-                  ),
-                ],
-              ),
-            ),
-          ),
-          const Gap(20),
-          FlatButton(
-            label: TextWrapper(
-              'Démarrer mon projet',
-              style:
-                  context.textTheme.titleLarge?.copyWith(color: Colors.white),
-            ),
-            disabledStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor.single(Colors.blue),
-            ),
-            normalStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor(_colors),
-            ),
-            hoveredStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor.single(Colors.green),
-            ),
-            focusedStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor.single(Colors.yellow),
-            ),
-            tappedStyle: const FlatButtonStyle(
-              backgroundColors: MultiColor.single(Colors.red),
-            ),
-          ),
-          const Gap(20),
-          ColoredBox(
-            color: _background,
-            child: Center(
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Column(
-                    children: [
-                      const Gap(20),
-                      SymbolButton(
-                        icon: const Icon(
-                          Icons.android,
-                          size: 25,
-                        ),
-                        label: const TextWrapper('Texte'),
-                        normalStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_disabledColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 1,
-                        ),
-                        hoveredStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_disabledColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors: MultiColor.single(_background),
-                          stroke: 1,
-                        ),
-                        selectedStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_selectedColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 1,
-                        ),
-                      )
-                        ..bloc.onClickUpIn()
-                        ..bloc.freeze(),
-                      const Gap(20),
-                      SymbolButton(
-                        icon: const Icon(
-                          Icons.android,
-                          size: 25,
-                        ),
-                        label: const TextWrapper('Texte'),
-                        normalStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_disabledColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 1,
-                        ),
-                        hoveredStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_disabledColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors: MultiColor.single(_background),
-                          stroke: 1,
-                        ),
-                        selectedStyle: const SymbolButtonStyle(
-                          borderColors: MultiColor(_selectedColors),
-                          foregroundColors: MultiColor.single(Colors.white),
-                          backgroundColors:
-                              MultiColor.single(_disabledBackground),
-                          stroke: 1,
-                        ),
-                      )..bloc.freeze(),
-                      const Gap(20),
-                    ],
-                  ),
-                  const Gap(20),
           Row(
-                    children: [
-                      SimpleIconButton(
-                        icon: const Icon(
-                          Icons.storm_outlined,
-                          size: 17,
-                        ),
-                        normalStyle: const SimpleIconButtonStyle(
-                          backgroundColors: MultiColor.single(_disabled),
-                        ),
-                        hoveredStyle: SimpleIconButtonStyle(
-                          backgroundColors:
-                              MultiColor.single(_disabledColors.last),
-                        ),
-                      ),
-                      const Gap(10),
-                      SimpleIconButton(
-                        icon: const Icon(
-                          Icons.sunny,
-                          size: 17,
-                        ),
-                        normalStyle: const SimpleIconButtonStyle(
-                          backgroundColors: MultiColor.single(_disabled),
-                        ),
-                        hoveredStyle: SimpleIconButtonStyle(
-                          backgroundColors:
-                              MultiColor.single(_disabledColors.last),
-                        ),
-                      ),
-                      const Gap(10),
-                      SimpleIconButton(
-                        icon: const Icon(
-                          Icons.wechat,
-                          size: 17,
-                        ),
-                        normalStyle: const SimpleIconButtonStyle(
-                          backgroundColors: MultiColor.single(_disabled),
-                        ),
-                        hoveredStyle: SimpleIconButtonStyle(
-                          backgroundColors:
-                              MultiColor.single(_disabledColors.last),
-                        ),
-                      )
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: const [
+              FlatButtons(),
+              Gap(20),
+              SymbolButtons(),
+              Gap(20),
+              SimpleIconButtons(),
             ],
           ),
           const Gap(20),
-                  Row(
-                    children: [
-                      SymbolButton(
-                        icon: const FlutterLogo(
-                          size: 50,
-                        ),
-                        normalStyle: const SymbolButtonStyle(
-                          dimension: 73,
-                          backgroundColors: MultiColor.single(Colors.white),
-                        ),
-                        hoveredStyle: SymbolButtonStyle(
-                          dimension: 73,
-                          backgroundColors: MultiColor.single(Colors.grey[300]),
-                        ),
-                      ),
-                    ],
-                  ),
-                  const Gap(20),
-                  FileSelectionButton(
-                    leading: const DecoratedBox(
-                      decoration: BoxDecoration(
-                        color: _disabled,
-                        borderRadius: BorderRadius.all(
-                          Radius.circular(5),
-                        ),
-                      ),
-                      child: Padding(
-                        padding: EdgeInsets.all(8),
-                        child: Icon(
-                          Icons.file_upload_outlined,
-                          color: Colors.white,
-                        ),
-                      ),
-                    ),
-                    title: TextWrapper(
-                      'Ajouter un fichier',
-                      style: Theme.of(context)
-                          .textTheme
-                          .titleLarge
-                          ?.copyWith(color: _disabled),
-                    ),
-                    subTitle: TextWrapper.text('Taille max: 20 Mo'),
-                    normalStyle: const FileSelectionButtonStyle(
-                      backgroundColors: MultiColor.single(_disabledBackground),
-                      foregroundColors: MultiColor.single(_disabled),
-                      borderColors: MultiColor.single(_disabled),
-                    ),
-                    hoveredStyle: const FileSelectionButtonStyle(
-                      backgroundColors: MultiColor.single(_disabledBackground),
-                      foregroundColors: MultiColor.single(_disabled),
-                      borderColors: MultiColor.single(Colors.white),
-                    ),
-                    invalidStyle: const FileSelectionButtonStyle(
-                      backgroundColors: MultiColor.single(_disabledBackground),
-                      foregroundColors: MultiColor.single(_invalidColor),
-                      borderColors: MultiColor.single(_invalidColor),
-                    ),
-                  )
-                ],
-              ),
-            ),
-          ),
-          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.grey3,
+          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,126 @@
+// 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});
+
+  @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: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          ),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Enabled'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.enable()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Disabled'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.disable()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Hovered'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.onMouseEnter()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Focused'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.onFocus()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Tapped'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.onClickDown()
+            ..bloc.freeze(),
+          const Gap(20),
+          SymbolButton(
+            label: const TextWrapper('Selected'),
+            icon: const Icon(
+              Icons.android,
+              size: 25,
+              color: Constants.white,
+            ),
+          )
+            ..bloc.select()
+            ..bloc.freeze(),
+          const Gap(20),
+          DecoratedBox(
+            decoration: BoxDecoration(
+              border: Border.all(color: Constants.red1),
+            ),
+            child: SymbolButton(
+              label: const TextWrapper('Trigger zone'),
+              icon: const Icon(
+                Icons.android,
+                size: 25,
+                color: Constants.white,
+              ),
+            ),
+          ),
+          const Gap(20),
+        ],
+      );
+}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -1,7 +1,9 @@
 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';
 
@@ -59,13 +61,35 @@ class _HomeState extends State<Home> {
         appBar: AppBar(
           title: const Text(title),
           actions: [
+            Row(
+              children: [
+                const Text('Mode'),
                 Switch.adaptive(
-              value: AdaptiveTheme.of(context).isDefault,
+                  value:
+                      AdaptiveTheme.of(context).brightness == Brightness.dark,
                   onChanged: (_) {
-                AdaptiveTheme.of(context).isDefault
+                    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);
+                  },
+                ),
+              ],
             )
           ],
         ),

packages/wyatt_ui_kit/example/lib/main.dart

@@ -17,105 +17,32 @@
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:wyatt_ui_kit_example/home.dart';
-import 'package:wyatt_ui_kit_example/theme_extension.dart';
+import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
 void main(List<String> args) {
   const forcePage = int.fromEnvironment('PAGE');
-  runApp(const App(
+  const forceTheme = int.fromEnvironment('THEME');
+  Themes.currentThemeIndex = forceTheme;
+  runApp(
+    const App(
       defaultPage: forcePage,
-  ),);
+      defaultTheme: forceTheme,
+    ),
+  );
 }
 
 class App extends StatelessWidget {
-  const App({required this.defaultPage, super.key});
+  const App({required this.defaultPage, required this.defaultTheme, super.key});
 
   final int defaultPage;
+  final int defaultTheme;
 
   @override
   Widget build(BuildContext context) => AdaptiveTheme(
         initial: AdaptiveThemeMode.light,
-        light: ThemeData.light().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),
-              ),
-            ),
-          ],
-        ),
-        dark: ThemeData.dark().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,
-              ),
-            ),
-          ],
-        ),
+        light: Themes.lightFromTheme(defaultTheme),
+        dark: Themes.darkFromTheme(defaultTheme),
         builder: (light, dark) => MaterialApp(
           localizationsDelegates: const [
             GlobalMaterialLocalizations.delegate,

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/flat_button_theme.dart

@@ -0,0 +1,151 @@
+// 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),
+      ),
+      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),
+      ),
+      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/symbol_button_theme.dart

@@ -0,0 +1,155 @@
+// 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)),
+      ),
+      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),
+      ),
+      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,152 @@
+// 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/flat_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(),
+        ],
+      );
+
+  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(),
+        ],
+      );
+}

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

@@ -15,7 +15,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'dart:async';
-import 'dart:math';
 
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
@@ -30,8 +29,6 @@ class InvalidButtonCubit extends ButtonCubit {
     emit(
       state.copyWith(
         state: ControlState.hovered,
-        // TODO(hpcl): change this
-        invalid: Random().nextBool(),
       ),
     );
   }
@@ -45,8 +42,6 @@ class InvalidButtonCubit extends ButtonCubit {
     emit(
       state.copyWith(
         state: ControlState.normal,
-        // TODO(hpcl): change this
-        invalid: Random().nextBool(),
       ),
     );
   }

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

@@ -40,7 +40,7 @@ class FileSelectionButton extends FileSelectionButtonComponent
     super.invalidStyle,
     super.onPressed,
     super.mainAxisSize,
-    this.themeResolver,
+    super.themeResolver,
     super.key,
   });
 
@@ -77,7 +77,9 @@ class FileSelectionButton extends FileSelectionButtonComponent
   FileSelectionButtonStyle? get invalidStyle =>
       super.invalidStyle as FileSelectionButtonStyle?;
 
-  final FileSelectionButtonThemeResolver? themeResolver;
+  @override
+  FileSelectionButtonThemeResolver? get themeResolver =>
+      super.themeResolver as FileSelectionButtonThemeResolver?;
 
   @override
   Widget build(BuildContext context) => exportBloc(

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

@@ -45,6 +45,10 @@ class $FileSelectionButtonCWProxyImpl
   FileSelectionButton onPressed(void Function(ControlState)? onPressed) =>
       this(onPressed: onPressed);
   @override
+  FileSelectionButton themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
+  @override
   FileSelectionButton key(Key? key) => this(key: key);
   @override
   FileSelectionButton call({
@@ -60,6 +64,7 @@ class $FileSelectionButtonCWProxyImpl
     ButtonStyle<dynamic>? selectedStyle,
     ButtonStyle<dynamic>? invalidStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       FileSelectionButton(

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

@@ -218,7 +218,6 @@ class FileSelectionButtonScreen
                   padding: style.padding ?? EdgeInsets.zero,
                   child: Row(
                     mainAxisSize: mainAxisSize ?? MainAxisSize.min,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
                       if (leading != null) ...[
                         leading ?? const SizedBox.shrink(),
@@ -240,7 +239,7 @@ class FileSelectionButtonScreen
                           ///
                           /// More infos in `negociate()` method
                           if (title != null) ...[
-                            Gap(style.padding?.horizontal ?? 10),
+                            Gap(style.padding?.vertical ?? 10),
                             Text(
                               title!.text,
                               style: title!.style ?? style.title,
@@ -267,7 +266,7 @@ class FileSelectionButtonScreen
                           ///
                           /// More infos in `negociate()` method
                           if (subTitle != null) ...[
-                            Gap(style.padding?.horizontal ?? 10),
+                            Gap(style.padding?.vertical ?? 10),
                             Text(
                               subTitle!.text,
                               style: subTitle!.style ?? style.subTitle,

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

@@ -17,7 +17,6 @@
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 
 class FileSelectionButtonThemeResolver extends ThemeResolver<
@@ -31,17 +30,48 @@ class FileSelectionButtonThemeResolver extends ThemeResolver<
   FileSelectionButtonStyle computeDefaultValue(
     BuildContext context, {
     ButtonState? extra,
-  }) =>
-      FileSelectionButtonStyle(
+  }) {
+    MultiColor backgroundColor = MultiColor.single(context.colorScheme.primary);
+    MultiColor foregroundColor =
+        MultiColor.single(context.colorScheme.onPrimary);
+
+    switch (extra?.state) {
+      case ControlState.disabled:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.12));
+        foregroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.38));
+        break;
+      case ControlState.hovered:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case ControlState.tapped:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case null:
+      case ControlState.normal:
+      case ControlState.focused:
+        break;
+    }
+
+    if (extra?.isInvalid ?? false) {
+      backgroundColor =
+            MultiColor.single(context.colorScheme.error);
+    }
+
+    return FileSelectionButtonStyle(
       title: context.textTheme.labelLarge,
       subTitle: context.textTheme.labelSmall,
       radius: (context.buttonTheme.shape is RoundedRectangleBorder)
           ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
           : null,
-        padding: context.buttonTheme.padding,
-        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
-        backgroundColors: MultiColor.single(context.colorScheme.primary),
+      padding: const EdgeInsets.symmetric(horizontal: 10),
+      foregroundColors: foregroundColor,
+      backgroundColors: backgroundColor,
     );
+  }
 
   @override
   final FileSelectionButtonStyle? Function(

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

@@ -38,7 +38,7 @@ class FlatButton extends FlatButtonComponent
     super.tappedStyle,
     super.onPressed,
     super.mainAxisSize,
-    this.themeResolver,
+    super.themeResolver,
     super.key,
   });
 
@@ -62,7 +62,9 @@ class FlatButton extends FlatButtonComponent
   @override
   FlatButtonStyle? get tappedStyle => super.tappedStyle as FlatButtonStyle?;
 
-  final FlatButtonThemeResolver? themeResolver;
+  @override
+  FlatButtonThemeResolver? get themeResolver =>
+      super.themeResolver as FlatButtonThemeResolver?;
 
   @override
   Widget build(BuildContext context) => exportBloc(

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

@@ -37,6 +37,10 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
   FlatButton onPressed(void Function(ControlState)? onPressed) =>
       this(onPressed: onPressed);
   @override
+  FlatButton themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
+  @override
   FlatButton key(Key? key) => this(key: key);
   @override
   FlatButton call({
@@ -50,6 +54,7 @@ class $FlatButtonCWProxyImpl implements $FlatButtonComponentCWProxy {
     ButtonStyle<dynamic>? focusedStyle,
     ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       FlatButton(

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

@@ -16,7 +16,6 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 
 class FlatButtonThemeResolver extends ThemeResolver<FlatButtonStyle,
@@ -26,9 +25,8 @@ class FlatButtonThemeResolver extends ThemeResolver<FlatButtonStyle,
     required this.customStyleFn,
   });
 
-  @override
-
   /// Values taken from <https://api.flutter.dev/flutter/material/ElevatedButton/defaultStyleOf.html>
+  @override
   FlatButtonStyle computeDefaultValue(
     BuildContext context, {
     ControlState? extra,

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

@@ -35,7 +35,7 @@ class SimpleIconButton extends SimpleIconButtonComponent
     super.focusedStyle,
     super.tappedStyle,
     super.onPressed,
-    this.themeResolver,
+    super.themeResolver,
     super.key,
   });
 
@@ -64,7 +64,9 @@ class SimpleIconButton extends SimpleIconButtonComponent
   SimpleIconButtonStyle? get tappedStyle =>
       super.tappedStyle as SimpleIconButtonStyle?;
 
-  final SimpleIconButtonThemeResolver? themeResolver;
+  @override
+  SimpleIconButtonThemeResolver? get themeResolver =>
+      super.themeResolver as SimpleIconButtonThemeResolver?;
 
   @override
   Widget build(BuildContext context) => exportBloc(

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

@@ -31,6 +31,10 @@ class $SimpleIconButtonCWProxyImpl
   SimpleIconButton onPressed(void Function(ControlState)? onPressed) =>
       this(onPressed: onPressed);
   @override
+  SimpleIconButton themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
+  @override
   SimpleIconButton key(Key? key) => this(key: key);
   @override
   SimpleIconButton call({
@@ -41,6 +45,7 @@ class $SimpleIconButtonCWProxyImpl
     ButtonStyle<dynamic>? focusedStyle,
     ButtonStyle<dynamic>? tappedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       SimpleIconButton(

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

@@ -16,7 +16,6 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 
 class SimpleIconButtonThemeResolver extends ThemeResolver<SimpleIconButtonStyle,
@@ -30,16 +29,42 @@ class SimpleIconButtonThemeResolver extends ThemeResolver<SimpleIconButtonStyle,
   SimpleIconButtonStyle computeDefaultValue(
     BuildContext context, {
     ControlState? extra,
-  }) =>
-      SimpleIconButtonStyle(
+  }) {
+    MultiColor backgroundColor = MultiColor.single(context.colorScheme.primary);
+    MultiColor foregroundColor =
+        MultiColor.single(context.colorScheme.onPrimary);
+
+    switch (extra) {
+      case ControlState.disabled:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.12));
+        foregroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.38));
+        break;
+      case ControlState.hovered:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case ControlState.tapped:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case null:
+      case ControlState.normal:
+      case ControlState.focused:
+        break;
+    }
+
+    return SimpleIconButtonStyle(
       dimension: context.buttonTheme.height,
       radius: (context.buttonTheme.shape is RoundedRectangleBorder)
           ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
           : null,
-        padding: context.buttonTheme.padding,
-        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
-        backgroundColors: MultiColor.single(context.colorScheme.primary),
+      padding: EdgeInsets.zero,
+      foregroundColors: foregroundColor,
+      backgroundColors: backgroundColor,
     );
+  }
 
   @override
   final SimpleIconButtonStyle? Function(

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

@@ -37,7 +37,7 @@ class SymbolButton extends SymbolButtonComponent
     super.tappedStyle,
     super.selectedStyle,
     super.mainAxisSize,
-    this.themeResolver,
+    super.themeResolver,
     super.onPressed,
     super.key,
   });
@@ -69,7 +69,9 @@ class SymbolButton extends SymbolButtonComponent
   SymbolButtonStyle? get selectedStyle =>
       super.selectedStyle as SymbolButtonStyle?;
 
-  final SymbolButtonThemeResolver? themeResolver;
+  @override
+  SymbolButtonThemeResolver? get themeResolver =>
+      super.themeResolver as SymbolButtonThemeResolver?;
 
   @override
   Widget build(BuildContext context) => exportBloc(

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

@@ -38,6 +38,10 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
   SymbolButton onPressed(void Function(ControlState)? onPressed) =>
       this(onPressed: onPressed);
   @override
+  SymbolButton themeResolver(
+          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
+      this(themeResolver: themeResolver);
+  @override
   SymbolButton key(Key? key) => this(key: key);
   @override
   SymbolButton call({
@@ -51,6 +55,7 @@ class $SymbolButtonCWProxyImpl implements $SymbolButtonComponentCWProxy {
     ButtonStyle<dynamic>? tappedStyle,
     ButtonStyle<dynamic>? selectedStyle,
     void Function(ControlState)? onPressed,
+    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       SymbolButton(

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

@@ -17,7 +17,6 @@
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/buttons/cubit/button_cubit.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/theme_resolver.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 
 class SymbolButtonThemeResolver extends ThemeResolver<SymbolButtonStyle,
@@ -31,17 +30,43 @@ class SymbolButtonThemeResolver extends ThemeResolver<SymbolButtonStyle,
   SymbolButtonStyle computeDefaultValue(
     BuildContext context, {
     ButtonState? extra,
-  }) =>
-      SymbolButtonStyle(
+  }) {
+    MultiColor backgroundColor = MultiColor.single(context.colorScheme.primary);
+    MultiColor foregroundColor =
+        MultiColor.single(context.colorScheme.onPrimary);
+
+    switch (extra?.state) {
+      case ControlState.disabled:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.12));
+        foregroundColor =
+            MultiColor.single(context.colorScheme.onSurface.withOpacity(0.38));
+        break;
+      case ControlState.hovered:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case ControlState.tapped:
+        backgroundColor =
+            MultiColor.single(context.colorScheme.primary.withOpacity(0.92));
+        break;
+      case null:
+      case ControlState.normal:
+      case ControlState.focused:
+        break;
+    }
+
+    return SymbolButtonStyle(
       label: context.textTheme.labelLarge,
-        dimension: context.buttonTheme.height,
+      dimension: context.buttonTheme.height*1.5,
       radius: (context.buttonTheme.shape is RoundedRectangleBorder)
           ? (context.buttonTheme.shape as RoundedRectangleBorder).borderRadius
           : null,
       padding: context.buttonTheme.padding,
-        foregroundColors: MultiColor.single(context.colorScheme.onPrimary),
-        backgroundColors: MultiColor.single(context.colorScheme.primary),
+      foregroundColors: foregroundColor,
+      backgroundColors: backgroundColor,
     );
+  }
 
   @override
   final SymbolButtonStyle? Function(