packages/wyatt_ui_components/example/lib/component_theme.dart

@@ -2,13 +2,13 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_components_example/components/custom_app_bar.dart';
 import 'package:wyatt_ui_components_example/components/custom_bottom_bar.dart';
 import 'package:wyatt_ui_components_example/components/custom_error_widget.dart';
-import 'package:wyatt_ui_components_example/components/custom_loader_widget.dart';
+import 'package:wyatt_ui_components_example/components/custom_loading_widget.dart';
 
 class AppThemeComponent {
   static ComponentThemeData get components => const ComponentThemeData.raw(
-        topAppBar: CustomAppBar(),
+        appBar: CustomAppBar(),
         bottomNavigationBar: CustomBottomNavigationBar(),
-        error: CustomErrorWidget(),
+        errorWidget: CustomErrorWidget(),
-        loader: CustomLoaderWidget(),
+        loadingWidget: CustomLoadingWidget(),
       );
 }

packages/wyatt_ui_components/example/lib/components/custom_error_widget.dart

@@ -5,17 +5,13 @@ import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 part 'custom_error_widget.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomErrorWidget extends ErrorComponent with $CustomErrorWidgetCWMixin {
+class CustomErrorWidget extends ErrorWidgetComponent
-  const CustomErrorWidget({
+    with $CustomErrorWidgetCWMixin {
-    super.colors,
+  const CustomErrorWidget({super.error, super.key});
-    super.message,
-    super.details,
-    super.key,
-  });
 
   @override
   Widget build(BuildContext context) => ColoredBox(
-        color: colors?.color ?? Colors.red,
+        color: Colors.red,
-        child: Center(child: Text(message?.data ?? 'Error')),
+        child: Center(child: Text(error?.data ?? 'Error')),
       );
 }

packages/wyatt_ui_components/example/lib/components/custom_error_widget.g.dart

@@ -6,38 +6,25 @@ part of 'custom_error_widget.dart';
 // ComponentCopyWithGenerator
 // **************************************************************************
 
-class $CustomErrorWidgetCWProxyImpl implements $ErrorComponentCWProxy {
+class $CustomErrorWidgetCWProxyImpl implements $ErrorWidgetComponentCWProxy {
   const $CustomErrorWidgetCWProxyImpl(this._value);
   final CustomErrorWidget _value;
   @override
-  CustomErrorWidget colors(MultiColor? colors) => this(colors: colors);
+  CustomErrorWidget error(TextWrapper? error) => this(error: error);
-  @override
-  CustomErrorWidget message(TextWrapper? message) => this(message: message);
-  @override
-  CustomErrorWidget details(TextWrapper? details) => this(details: details);
-  @override
-  CustomErrorWidget themeResolver(
-          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
-      this(themeResolver: themeResolver);
   @override
   CustomErrorWidget key(Key? key) => this(key: key);
   @override
   CustomErrorWidget call({
-    MultiColor? colors,
+    TextWrapper? error,
-    TextWrapper? message,
-    TextWrapper? details,
-    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
     Key? key,
   }) =>
       CustomErrorWidget(
-        colors: colors ?? _value.colors,
+        error: error ?? _value.error,
-        message: message ?? _value.message,
-        details: details ?? _value.details,
         key: key ?? _value.key,
       );
 }
 
 mixin $CustomErrorWidgetCWMixin on Component {
-  $ErrorComponentCWProxy get copyWith =>
+  $ErrorWidgetComponentCWProxy get copyWith =>
       $CustomErrorWidgetCWProxyImpl(this as CustomErrorWidget);
 }

packages/wyatt_ui_components/example/lib/components/custom_loader_widget.g.dart

@@ -1,51 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'custom_loader_widget.dart';
-
-// **************************************************************************
-// ComponentCopyWithGenerator
-// **************************************************************************
-
-class $CustomLoaderWidgetCWProxyImpl implements $LoaderComponentCWProxy {
-  const $CustomLoaderWidgetCWProxyImpl(this._value);
-  final CustomLoaderWidget _value;
-  @override
-  CustomLoaderWidget colors(MultiColor? colors) => this(colors: colors);
-  @override
-  CustomLoaderWidget radius(double? radius) => this(radius: radius);
-  @override
-  CustomLoaderWidget stroke(double? stroke) => this(stroke: stroke);
-  @override
-  CustomLoaderWidget duration(Duration? duration) => this(duration: duration);
-  @override
-  CustomLoaderWidget flip(bool? flip) => this(flip: flip);
-  @override
-  CustomLoaderWidget themeResolver(
-          ThemeResolver<dynamic, dynamic, dynamic>? themeResolver) =>
-      this(themeResolver: themeResolver);
-  @override
-  CustomLoaderWidget key(Key? key) => this(key: key);
-  @override
-  CustomLoaderWidget call({
-    MultiColor? colors,
-    double? radius,
-    double? stroke,
-    Duration? duration,
-    bool? flip,
-    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
-    Key? key,
-  }) =>
-      CustomLoaderWidget(
-        colors: colors ?? _value.colors,
-        duration: duration ?? _value.duration,
-        flip: flip ?? _value.flip,
-        radius: radius ?? _value.radius,
-        stroke: stroke ?? _value.stroke,
-        key: key ?? _value.key,
-      );
-}
-
-mixin $CustomLoaderWidgetCWMixin on Component {
-  $LoaderComponentCWProxy get copyWith =>
-      $CustomLoaderWidgetCWProxyImpl(this as CustomLoaderWidget);
-}

packages/wyatt_ui_components/example/lib/components/custom_loading_widget.dart

@@ -2,24 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
-part 'custom_loader_widget.g.dart';
+part 'custom_loading_widget.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomLoaderWidget extends LoaderComponent
+class CustomLoadingWidget extends LoadingWidgetComponent
-    with $CustomLoaderWidgetCWMixin {
+    with $CustomLoadingWidgetCWMixin {
-  const CustomLoaderWidget({
+  const CustomLoadingWidget({super.color, super.key});
-    super.colors,
-    super.duration,
-    super.flip,
-    super.radius,
-    super.stroke,
-    super.key,
-  });
 
   @override
   Widget build(BuildContext context) => Center(
         child: CircularProgressIndicator(
-          color: colors?.color ?? Colors.blue,
+          color: color,
         ),
       );
 }

packages/wyatt_ui_components/example/lib/components/custom_loading_widget.g.dart

@@ -0,0 +1,31 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'custom_loading_widget.dart';
+
+// **************************************************************************
+// ComponentCopyWithGenerator
+// **************************************************************************
+
+class $CustomLoadingWidgetCWProxyImpl
+    implements $LoadingWidgetComponentCWProxy {
+  const $CustomLoadingWidgetCWProxyImpl(this._value);
+  final CustomLoadingWidget _value;
+  @override
+  CustomLoadingWidget color(Color? color) => this(color: color);
+  @override
+  CustomLoadingWidget key(Key? key) => this(key: key);
+  @override
+  CustomLoadingWidget call({
+    Color? color,
+    Key? key,
+  }) =>
+      CustomLoadingWidget(
+        color: color ?? _value.color,
+        key: key ?? _value.key,
+      );
+}
+
+mixin $CustomLoadingWidgetCWMixin on Component {
+  $LoadingWidgetComponentCWProxy get copyWith =>
+      $CustomLoadingWidgetCWProxyImpl(this as CustomLoadingWidget);
+}

packages/wyatt_ui_components/example/lib/main.dart

@@ -48,23 +48,24 @@ class Home extends StatelessWidget {
   Widget build(BuildContext context) => Scaffold(
         appBar: PreferredSize(
           preferredSize: const Size.fromHeight(60),
-          child: context.components.topAppBarComponent
+          child: context.components.appBar?.copyWith
-              .title(const TextWrapper('Example title')),
+                  .title(const TextWrapper('Example title')) ??
+              const SizedBox.shrink(),
         ),
         body: Column(
           children: [
             Expanded(
-              child: context.components.errorComponent.call(
+              child: context.components.errorWidget
-                message: const TextWrapper('Example error'),
+                      ?.copyWith(error: const TextWrapper('Example erreur')) ??
-              ),
+                  const SizedBox.shrink(),
             ),
             const SizedBox(
               height: 10,
             ),
             Expanded(
-              child: context.components.loaderComponent.call(
+              child: context.components.loadingWidget
-                colors: const MultiColor.single(Colors.green),
+                      ?.copyWith(color: Colors.green) ??
-              ),
+                  const SizedBox.shrink(),
             ),
           ],
         ),

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

@@ -22,7 +22,7 @@ import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dar
 
 /// {@template file_selection_button_style}
 /// File selection button style.
-///
+/// 
 /// This style is used for the FileSelectionButton widget.
 /// {@endtemplate}
 class FileSelectionButtonStyle extends ButtonStyle<FileSelectionButtonStyle> {

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

@@ -22,7 +22,7 @@ import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dar
 
 /// {@template flat_button_style}
 /// Flat button style.
-///
+/// 
 /// This style is used for the FlatButton widget.
 /// {@endtemplate}
 class FlatButtonStyle extends ButtonStyle<FlatButtonStyle> {

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

@@ -22,7 +22,7 @@ import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dar
 
 /// {@template simple_icon_button_style}
 /// Simple icon button style.
-///
+/// 
 /// This style is used for the SimpleIconButton widget.
 /// {@endtemplate}
 class SimpleIconButtonStyle extends ButtonStyle<SimpleIconButtonStyle> {

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

@@ -22,7 +22,7 @@ import 'package:wyatt_ui_components/src/domain/entities/buttons/button_style.dar
 
 /// {@template symbol_button_style}
 /// Symbol button style.
-///
+/// 
 /// This style is used for the SymbolButton widget.
 /// {@endtemplate}
 class SymbolButtonStyle extends ButtonStyle<SymbolButtonStyle> {

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

@@ -18,9 +18,10 @@ export './bars/bars.dart';
 export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';
-export './error/error.dart';
+export './error_widget_component.dart';
 export './gradients/gradients.dart';
 export './loader/loader.dart';
+export './loading_widget_component.dart';
 export './rich_text_builder/rich_text_builder.dart';
 export './text_inputs/text_inputs.dart';
 export './theme_style.dart';

packages/wyatt_ui_components/lib/src/domain/entities/error/error_component.g.dart

@@ -1,23 +0,0 @@
-// GENERATED CODE - DO NOT MODIFY BY HAND
-
-part of 'error_component.dart';
-
-// **************************************************************************
-// ComponentProxyGenerator
-// **************************************************************************
-
-abstract class $ErrorComponentCWProxy {
-  ErrorComponent colors(MultiColor? colors);
-  ErrorComponent message(TextWrapper? message);
-  ErrorComponent details(TextWrapper? details);
-  ErrorComponent themeResolver(
-      ThemeResolver<dynamic, dynamic, dynamic>? themeResolver);
-  ErrorComponent key(Key? key);
-  ErrorComponent call({
-    MultiColor? colors,
-    TextWrapper? message,
-    TextWrapper? details,
-    ThemeResolver<dynamic, dynamic, dynamic>? themeResolver,
-    Key? key,
-  });
-}

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

@@ -14,29 +14,15 @@
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
 import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 
-part 'error_component.g.dart';
+part 'error_widget_component.g.dart';
 
 @ComponentProxyExtension()
-abstract class ErrorComponent extends Component
+abstract class ErrorWidgetComponent extends Component
-    with CopyWithMixin<$ErrorComponentCWProxy> {
+    with CopyWithMixin<$ErrorWidgetComponentCWProxy> {
-  const ErrorComponent({
+  const ErrorWidgetComponent({required this.error, super.key});
-    this.colors,
+  final TextWrapper? error;
-    this.message,
-    this.details,
-    super.themeResolver,
-    super.key,
-  });
-
-  /// Error message
-  final TextWrapper? message;
-
-  /// Details for the error component
-  final TextWrapper? details;
-
-  /// Colors for the error component
-  final MultiColor? colors;
 }

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

@@ -0,0 +1,16 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'error_widget_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $ErrorWidgetComponentCWProxy {
+  ErrorWidgetComponent error(TextWrapper? error);
+  ErrorWidgetComponent key(Key? key);
+  ErrorWidgetComponent call({
+    TextWrapper? error,
+    Key? key,
+  });
+}

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

@@ -14,4 +14,16 @@
 // 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 './error_component.dart';
+import 'package:flutter/material.dart';
+import 'package:wyatt_component_copy_with_extension/wyatt_component_copy_with_extension.dart';
+import 'package:wyatt_ui_components/src/core/mixins/copy_with_mixin.dart';
+import 'package:wyatt_ui_components/src/domain/entities/component.dart';
+
+part 'loading_widget_component.g.dart';
+
+@ComponentProxyExtension()
+abstract class LoadingWidgetComponent extends Component
+    with CopyWithMixin<$LoadingWidgetComponentCWProxy> {
+  const LoadingWidgetComponent({required this.color, super.key});
+  final Color? color;
+}

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

@@ -0,0 +1,16 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'loading_widget_component.dart';
+
+// **************************************************************************
+// ComponentProxyGenerator
+// **************************************************************************
+
+abstract class $LoadingWidgetComponentCWProxy {
+  LoadingWidgetComponent color(Color? color);
+  LoadingWidgetComponent key(Key? key);
+  LoadingWidgetComponent call({
+    Color? color,
+    Key? key,
+  });
+}

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

@@ -153,7 +153,7 @@ class RichTextNode {
   /// Returns an InlineSpan from the given RichTextNode.
   /// The given RichTextParser is used to convert the RichTextNode to an
   /// InlineSpan.
-  ///
+  /// 
   /// InlineSpan is used to display text in the RichText widget.
   InlineSpan toInlineSpan(RichTextParser parser) {
     final children = <InlineSpan>[];
@@ -192,7 +192,7 @@ class RichTextParser {
   /// Returns a default RichTextParser.
   /// The default RichTextParser uses the given nodeBuilder to convert a
   /// RichTextNode to an InlineSpan.
-  ///
+  /// 
   /// By default, the nodeBuilder returns a TextSpan with the given content
   /// and style.
   factory RichTextParser.defaultBuilder() => RichTextParser(
@@ -201,7 +201,7 @@ class RichTextParser {
           style: style,
         ),
       );
-
+  
   /// Converts the given RichTextNode to an InlineSpan.
   final InlineSpan Function(String content, TextStyle style) nodeBuilder;
 }

packages/wyatt_ui_components/lib/src/domain/theme_extensions/top_bar_theme_extension.dart

@@ -84,10 +84,7 @@ class TopBarThemeExtension extends ThemeExtension<TopBarThemeExtension> {
       backgroundColors:
           MultiColor.lerp(backgroundColors, other.backgroundColors, t),
       selectedIndicatorColors: MultiColor.lerp(
-        selectedIndicatorColors,
+          selectedIndicatorColors, other.selectedIndicatorColors, t,),
-        other.selectedIndicatorColors,
-        t,
-      ),
       dividerColor: Color.lerp(dividerColor, other.dividerColor, t),
       titleStyle: TextStyle.lerp(titleStyle, other.titleStyle, t),
       subtitleStyle: TextStyle.lerp(subtitleStyle, other.subtitleStyle, t),

packages/wyatt_ui_components/lib/src/features/component_theme.dart

@@ -26,6 +26,7 @@ class ComponentTheme extends StatelessWidget {
   const ComponentTheme({
     required this.child,
     required this.data,
+    this.themeExtensionProvider = const DefaultThemeExtensionProvider(),
     super.key,
   });
 
@@ -34,6 +35,10 @@ class ComponentTheme extends StatelessWidget {
   /// This contains all components instances of the theme.
   final ComponentThemeData data;
 
+  /// The [ThemeExtensionProvider] that provides the extensions for the
+  /// current theme.
+  final ThemeExtensionProvider themeExtensionProvider;
+
   /// The widget below this widget in the tree.
   final Widget child;
 
@@ -61,9 +66,13 @@ class ComponentTheme extends StatelessWidget {
   }
 
   @override
-  Widget build(BuildContext context) => _InheritedComponentTheme(
+  Widget build(BuildContext context) => Theme(
-        this,
+        // Injections of the default extensions for the current brightness
-        child: child,
+        data: themeExtensionProvider.applyExtensionsTo(Theme.of(context)),
+        child: _InheritedComponentTheme(
+          this,
+          child: child,
+        ),
       );
 }
 

packages/wyatt_ui_components/lib/src/features/component_theme_data.dart

@@ -15,7 +15,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:copy_with_extension/copy_with_extension.dart';
-import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/src/domain/entities/entities.dart';
 part 'component_theme_data.g.dart';
 
@@ -24,153 +23,82 @@ part 'component_theme_data.g.dart';
 /// {@endtemplate}
 @CopyWith()
 class ComponentThemeData {
-  /// {@macro component_theme_data}
   factory ComponentThemeData({
-    TopAppBarComponent? topAppBar,
+    TopAppBarComponent? appBar,
-    TopNavigationBarComponent? topNavigationBar,
+    TopNavigationBarComponent? topNavigationBarComponent,
     BottomNavigationBarComponent? bottomNavigationBar,
-    ErrorComponent? error,
+    ErrorWidgetComponent? errorWidget,
-    LoaderComponent? loader,
+    LoadingWidgetComponent? loadingWidget,
-    RichTextBuilderComponent? richTextBuilder,
+    LoaderComponent? loaderComponent,
-    TextInputComponent? textInput,
+    RichTextBuilderComponent? richTextBuilderComponent,
-    FileSelectionButtonComponent? fileSelectionButton,
+    TextInputComponent? textInputComponent,
-    FlatButtonComponent? flatButton,
+    FileSelectionButtonComponent? fileSelectionButtonComponent,
-    SimpleIconButtonComponent? simpleIconButton,
+    FlatButtonComponent? flatButtonComponent,
-    SymbolButtonComponent? symbolButton,
+    SimpleIconButtonComponent? simpleIconButtonComponent,
-    InformationCardComponent? informationCard,
+    SymbolButtonComponent? symbolButtonComponent,
-    PortfolioCardComponent? portfolioCard,
+    InformationCardComponent? informationCardComponent,
-    QuoteCardComponent? quoteCard,
+    PortfolioCardComponent? portfolioCardComponent,
-    SkillCardComponent? skillCard,
+    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCardComponent,
   }) =>
       ComponentThemeData.raw(
-        topAppBar: topAppBar,
+        appBar: appBar,
-        topNavigationBar: topNavigationBar,
+        topNavigationBarComponent: topNavigationBarComponent,
         bottomNavigationBar: bottomNavigationBar,
-        error: error,
+        errorWidget: errorWidget,
-        loader: loader,
+        loadingWidget: loadingWidget,
-        richTextBuilder: richTextBuilder,
+        loaderComponent: loaderComponent,
-        textInput: textInput,
+        richTextBuilderComponent: richTextBuilderComponent,
-        fileSelectionButton: fileSelectionButton,
+        textInputComponent: textInputComponent,
-        flatButton: flatButton,
+        fileSelectionButtonComponent: fileSelectionButtonComponent,
-        simpleIconButton: simpleIconButton,
+        flatButtonComponent: flatButtonComponent,
-        symbolButton: symbolButton,
+        simpleIconButtonComponent: simpleIconButtonComponent,
-        informationCard: informationCard,
+        symbolButtonComponent: symbolButtonComponent,
-        portfolioCard: portfolioCard,
+        informationCardComponent: informationCardComponent,
-        quoteCard: quoteCard,
+        portfolioCardComponent: portfolioCardComponent,
-        skillCard: skillCard,
+        quoteCardComponent: quoteCardComponent,
+        skillCardComponent: skillCardComponent,
       );
 
-  /// {@macro component_theme_data}
-  factory ComponentThemeData.fromOther(ComponentThemeData other) =>
-      ComponentThemeData(
-        topAppBar: other.topAppBar,
-        topNavigationBar: other.topNavigationBar,
-        bottomNavigationBar: other.bottomNavigationBar,
-        error: other.error,
-        loader: other.loader,
-        richTextBuilder: other.richTextBuilder,
-        textInput: other.textInput,
-        fileSelectionButton: other.fileSelectionButton,
-        flatButton: other.flatButton,
-        simpleIconButton: other.simpleIconButton,
-        symbolButton: other.symbolButton,
-        informationCard: other.informationCard,
-        portfolioCard: other.portfolioCard,
-        quoteCard: other.quoteCard,
-        skillCard: other.skillCard,
-      );
-
-  /// Create a [ComponentThemeData] given a set of exact values. Most values
-  /// must be specified.
-  ///
-  /// This will rarely be used directly. It is used by lerp to
-  /// create intermediate themes based on two themes created with the
-  /// [ComponentThemeData] constructor.
   const ComponentThemeData.raw({
-    this.topAppBar,
+    this.appBar,
-    this.topNavigationBar,
+    this.topNavigationBarComponent,
     this.bottomNavigationBar,
-    this.error,
+    this.errorWidget,
-    this.loader,
+    this.loadingWidget,
-    this.richTextBuilder,
+    this.loaderComponent,
-    this.textInput,
+    this.richTextBuilderComponent,
-    this.fileSelectionButton,
+    this.textInputComponent,
-    this.flatButton,
+    this.fileSelectionButtonComponent,
-    this.simpleIconButton,
+    this.flatButtonComponent,
-    this.symbolButton,
+    this.simpleIconButtonComponent,
-    this.informationCard,
+    this.symbolButtonComponent,
-    this.portfolioCard,
+    this.informationCardComponent,
-    this.quoteCard,
+    this.portfolioCardComponent,
-    this.skillCard,
+    this.quoteCardComponent,
+    this.skillCardComponent,
   });
 
-  R _get<T extends Component, R>(T? component, R? returned) {
+  final TopAppBarComponent? appBar;
-    if (component == null) {
-      throw FlutterError('No $T component provided.\n'
-          'Please provide a $T component in the ComponentThemeData.');
-    }
 
-    if (returned == null) {
+  final TopNavigationBarComponent? topNavigationBarComponent;
-      throw FlutterError('$T does not have a CopyWith method.\n'
-          'Please provide a $T component that implements CopyWith '
-          'in the ComponentThemeData.');
-    }
-
-    return returned;
-  }
-
-  // Bars
-  final TopAppBarComponent? topAppBar;
-  $TopAppBarComponentCWProxy get topAppBarComponent =>
-      _get(topAppBar, topAppBar?.copyWith);
-  final TopNavigationBarComponent? topNavigationBar;
-  $TopNavigationBarComponentCWProxy get topNavigationBarComponent =>
-      _get(topNavigationBar, topNavigationBar?.copyWith);
   final BottomNavigationBarComponent? bottomNavigationBar;
-  $BottomNavigationBarComponentCWProxy get bottomNavigationBarComponent =>
+  final ErrorWidgetComponent? errorWidget;
-      _get(bottomNavigationBar, bottomNavigationBar?.copyWith);
+  final LoadingWidgetComponent? loadingWidget;
+  final LoaderComponent? loaderComponent;
 
-  // CRUD Widgets
+  final RichTextBuilderComponent? richTextBuilderComponent;
-  final ErrorComponent? error;
+  final TextInputComponent? textInputComponent;
-  $ErrorComponentCWProxy get errorComponent => _get(error, error?.copyWith);
-  final LoaderComponent? loader;
-  $LoaderComponentCWProxy get loaderComponent => _get(loader, loader?.copyWith);
-
-  // Cards
-  final InformationCardComponent? informationCard;
-  $InformationCardComponentCWProxy get informationCardComponent =>
-      _get(informationCard, informationCard?.copyWith);
-  final PortfolioCardComponent? portfolioCard;
-  $PortfolioCardComponentCWProxy get portfolioCardComponent =>
-      _get(portfolioCard, portfolioCard?.copyWith);
-  final QuoteCardComponent? quoteCard;
-  $QuoteCardComponentCWProxy get quoteCardComponent =>
-      _get(quoteCard, quoteCard?.copyWith);
-  final SkillCardComponent? skillCard;
-  $SkillCardComponentCWProxy get skillCardComponent =>
-      _get(skillCard, skillCard?.copyWith);
-
-  // Rich Text
-  final RichTextBuilderComponent? richTextBuilder;
-  $RichTextBuilderComponentCWProxy get richTextBuilderComponent =>
-      _get(richTextBuilder, richTextBuilder?.copyWith);
-
-  // Text Inputs
-  final TextInputComponent? textInput;
-  $TextInputComponentCWProxy get textInputComponent =>
-      _get(textInput, textInput?.copyWith);
 
   // Buttons
-  final FileSelectionButtonComponent? fileSelectionButton;
+  final FileSelectionButtonComponent? fileSelectionButtonComponent;
-  $FileSelectionButtonComponentCWProxy get fileSelectionButtonComponent =>
+  final FlatButtonComponent? flatButtonComponent;
-      _get(fileSelectionButton, fileSelectionButton?.copyWith);
+  final SimpleIconButtonComponent? simpleIconButtonComponent;
-  final FlatButtonComponent? flatButton;
+  final SymbolButtonComponent? symbolButtonComponent;
-  $FlatButtonComponentCWProxy get flatButtonComponent =>
+
-      _get(flatButton, flatButton?.copyWith);
+  // Cards
-  final SimpleIconButtonComponent? simpleIconButton;
+  final InformationCardComponent? informationCardComponent;
-  $SimpleIconButtonComponentCWProxy get simpleIconButtonComponent =>
+  final PortfolioCardComponent? portfolioCardComponent;
-      _get(simpleIconButton, simpleIconButton?.copyWith);
+  final QuoteCardComponent? quoteCardComponent;
-  final SymbolButtonComponent? symbolButton;
+  final SkillCardComponent? skillCardComponent;
-  $SymbolButtonComponentCWProxy get symbolButtonComponent =>
-      _get(symbolButton, symbolButton?.copyWith);
 }

packages/wyatt_ui_components/lib/src/features/component_theme_data.g.dart

@@ -7,39 +7,46 @@ part of 'component_theme_data.dart';
 // **************************************************************************
 
 abstract class _$ComponentThemeDataCWProxy {
-  ComponentThemeData topAppBar(TopAppBarComponent? topAppBar);
+  ComponentThemeData appBar(TopAppBarComponent? appBar);
 
-  ComponentThemeData topNavigationBar(
+  ComponentThemeData topNavigationBarComponent(
-      TopNavigationBarComponent? topNavigationBar);
+      TopNavigationBarComponent? topNavigationBarComponent);
 
   ComponentThemeData bottomNavigationBar(
       BottomNavigationBarComponent? bottomNavigationBar);
 
-  ComponentThemeData error(ErrorComponent? error);
+  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget);
 
-  ComponentThemeData loader(LoaderComponent? loader);
+  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget);
 
-  ComponentThemeData richTextBuilder(RichTextBuilderComponent? richTextBuilder);
+  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent);
 
-  ComponentThemeData textInput(TextInputComponent? textInput);
+  ComponentThemeData richTextBuilderComponent(
+      RichTextBuilderComponent? richTextBuilderComponent);
 
-  ComponentThemeData fileSelectionButton(
+  ComponentThemeData textInputComponent(TextInputComponent? textInputComponent);
-      FileSelectionButtonComponent? fileSelectionButton);
 
-  ComponentThemeData flatButton(FlatButtonComponent? flatButton);
+  ComponentThemeData fileSelectionButtonComponent(
+      FileSelectionButtonComponent? fileSelectionButtonComponent);
 
-  ComponentThemeData simpleIconButton(
+  ComponentThemeData flatButtonComponent(
-      SimpleIconButtonComponent? simpleIconButton);
+      FlatButtonComponent? flatButtonComponent);
 
-  ComponentThemeData symbolButton(SymbolButtonComponent? symbolButton);
+  ComponentThemeData simpleIconButtonComponent(
+      SimpleIconButtonComponent? simpleIconButtonComponent);
 
-  ComponentThemeData informationCard(InformationCardComponent? informationCard);
+  ComponentThemeData symbolButtonComponent(
+      SymbolButtonComponent? symbolButtonComponent);
 
-  ComponentThemeData portfolioCard(PortfolioCardComponent? portfolioCard);
+  ComponentThemeData informationCardComponent(
+      InformationCardComponent? informationCardComponent);
 
-  ComponentThemeData quoteCard(QuoteCardComponent? quoteCard);
+  ComponentThemeData portfolioCardComponent(
+      PortfolioCardComponent? portfolioCardComponent);
 
-  ComponentThemeData skillCard(SkillCardComponent? skillCard);
+  ComponentThemeData quoteCardComponent(QuoteCardComponent? quoteCardComponent);
+
+  ComponentThemeData skillCardComponent(SkillCardComponent? skillCardComponent);
 
   /// This function **does support** nullification of nullable fields. All `null` values passed to `non-nullable` fields will be ignored. You can also use `ComponentThemeData(...).copyWith.fieldName(...)` to override fields one at a time with nullification support.
   ///
@@ -48,21 +55,22 @@ abstract class _$ComponentThemeDataCWProxy {
   /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
   /// ````
   ComponentThemeData call({
-    TopAppBarComponent? topAppBar,
+    TopAppBarComponent? appBar,
-    TopNavigationBarComponent? topNavigationBar,
+    TopNavigationBarComponent? topNavigationBarComponent,
     BottomNavigationBarComponent? bottomNavigationBar,
-    ErrorComponent? error,
+    ErrorWidgetComponent? errorWidget,
-    LoaderComponent? loader,
+    LoadingWidgetComponent? loadingWidget,
-    RichTextBuilderComponent? richTextBuilder,
+    LoaderComponent? loaderComponent,
-    TextInputComponent? textInput,
+    RichTextBuilderComponent? richTextBuilderComponent,
-    FileSelectionButtonComponent? fileSelectionButton,
+    TextInputComponent? textInputComponent,
-    FlatButtonComponent? flatButton,
+    FileSelectionButtonComponent? fileSelectionButtonComponent,
-    SimpleIconButtonComponent? simpleIconButton,
+    FlatButtonComponent? flatButtonComponent,
-    SymbolButtonComponent? symbolButton,
+    SimpleIconButtonComponent? simpleIconButtonComponent,
-    InformationCardComponent? informationCard,
+    SymbolButtonComponent? symbolButtonComponent,
-    PortfolioCardComponent? portfolioCard,
+    InformationCardComponent? informationCardComponent,
-    QuoteCardComponent? quoteCard,
+    PortfolioCardComponent? portfolioCardComponent,
-    SkillCardComponent? skillCard,
+    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCardComponent,
   });
 }
 
@@ -73,13 +81,12 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
   final ComponentThemeData _value;
 
   @override
-  ComponentThemeData topAppBar(TopAppBarComponent? topAppBar) =>
+  ComponentThemeData appBar(TopAppBarComponent? appBar) => this(appBar: appBar);
-      this(topAppBar: topAppBar);
 
   @override
-  ComponentThemeData topNavigationBar(
+  ComponentThemeData topNavigationBarComponent(
-          TopNavigationBarComponent? topNavigationBar) =>
+          TopNavigationBarComponent? topNavigationBarComponent) =>
-      this(topNavigationBar: topNavigationBar);
+      this(topNavigationBarComponent: topNavigationBarComponent);
 
   @override
   ComponentThemeData bottomNavigationBar(
@@ -87,54 +94,66 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
       this(bottomNavigationBar: bottomNavigationBar);
 
   @override
-  ComponentThemeData error(ErrorComponent? error) => this(error: error);
+  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget) =>
+      this(errorWidget: errorWidget);
 
   @override
-  ComponentThemeData loader(LoaderComponent? loader) => this(loader: loader);
+  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget) =>
+      this(loadingWidget: loadingWidget);
 
   @override
-  ComponentThemeData richTextBuilder(
+  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent) =>
-          RichTextBuilderComponent? richTextBuilder) =>
+      this(loaderComponent: loaderComponent);
-      this(richTextBuilder: richTextBuilder);
 
   @override
-  ComponentThemeData textInput(TextInputComponent? textInput) =>
+  ComponentThemeData richTextBuilderComponent(
-      this(textInput: textInput);
+          RichTextBuilderComponent? richTextBuilderComponent) =>
+      this(richTextBuilderComponent: richTextBuilderComponent);
 
   @override
-  ComponentThemeData fileSelectionButton(
+  ComponentThemeData textInputComponent(
-          FileSelectionButtonComponent? fileSelectionButton) =>
+          TextInputComponent? textInputComponent) =>
-      this(fileSelectionButton: fileSelectionButton);
+      this(textInputComponent: textInputComponent);
 
   @override
-  ComponentThemeData flatButton(FlatButtonComponent? flatButton) =>
+  ComponentThemeData fileSelectionButtonComponent(
-      this(flatButton: flatButton);
+          FileSelectionButtonComponent? fileSelectionButtonComponent) =>
+      this(fileSelectionButtonComponent: fileSelectionButtonComponent);
 
   @override
-  ComponentThemeData simpleIconButton(
+  ComponentThemeData flatButtonComponent(
-          SimpleIconButtonComponent? simpleIconButton) =>
+          FlatButtonComponent? flatButtonComponent) =>
-      this(simpleIconButton: simpleIconButton);
+      this(flatButtonComponent: flatButtonComponent);
 
   @override
-  ComponentThemeData symbolButton(SymbolButtonComponent? symbolButton) =>
+  ComponentThemeData simpleIconButtonComponent(
-      this(symbolButton: symbolButton);
+          SimpleIconButtonComponent? simpleIconButtonComponent) =>
+      this(simpleIconButtonComponent: simpleIconButtonComponent);
 
   @override
-  ComponentThemeData informationCard(
+  ComponentThemeData symbolButtonComponent(
-          InformationCardComponent? informationCard) =>
+          SymbolButtonComponent? symbolButtonComponent) =>
-      this(informationCard: informationCard);
+      this(symbolButtonComponent: symbolButtonComponent);
 
   @override
-  ComponentThemeData portfolioCard(PortfolioCardComponent? portfolioCard) =>
+  ComponentThemeData informationCardComponent(
-      this(portfolioCard: portfolioCard);
+          InformationCardComponent? informationCardComponent) =>
+      this(informationCardComponent: informationCardComponent);
 
   @override
-  ComponentThemeData quoteCard(QuoteCardComponent? quoteCard) =>
+  ComponentThemeData portfolioCardComponent(
-      this(quoteCard: quoteCard);
+          PortfolioCardComponent? portfolioCardComponent) =>
+      this(portfolioCardComponent: portfolioCardComponent);
 
   @override
-  ComponentThemeData skillCard(SkillCardComponent? skillCard) =>
+  ComponentThemeData quoteCardComponent(
-      this(skillCard: skillCard);
+          QuoteCardComponent? quoteCardComponent) =>
+      this(quoteCardComponent: quoteCardComponent);
+
+  @override
+  ComponentThemeData skillCardComponent(
+          SkillCardComponent? skillCardComponent) =>
+      this(skillCardComponent: skillCardComponent);
 
   @override
 
@@ -145,83 +164,95 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
   /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
   /// ````
   ComponentThemeData call({
-    Object? topAppBar = const $CopyWithPlaceholder(),
+    Object? appBar = const $CopyWithPlaceholder(),
-    Object? topNavigationBar = const $CopyWithPlaceholder(),
+    Object? topNavigationBarComponent = const $CopyWithPlaceholder(),
     Object? bottomNavigationBar = const $CopyWithPlaceholder(),
-    Object? error = const $CopyWithPlaceholder(),
+    Object? errorWidget = const $CopyWithPlaceholder(),
-    Object? loader = const $CopyWithPlaceholder(),
+    Object? loadingWidget = const $CopyWithPlaceholder(),
-    Object? richTextBuilder = const $CopyWithPlaceholder(),
+    Object? loaderComponent = const $CopyWithPlaceholder(),
-    Object? textInput = const $CopyWithPlaceholder(),
+    Object? richTextBuilderComponent = const $CopyWithPlaceholder(),
-    Object? fileSelectionButton = const $CopyWithPlaceholder(),
+    Object? textInputComponent = const $CopyWithPlaceholder(),
-    Object? flatButton = const $CopyWithPlaceholder(),
+    Object? fileSelectionButtonComponent = const $CopyWithPlaceholder(),
-    Object? simpleIconButton = const $CopyWithPlaceholder(),
+    Object? flatButtonComponent = const $CopyWithPlaceholder(),
-    Object? symbolButton = const $CopyWithPlaceholder(),
+    Object? simpleIconButtonComponent = const $CopyWithPlaceholder(),
-    Object? informationCard = const $CopyWithPlaceholder(),
+    Object? symbolButtonComponent = const $CopyWithPlaceholder(),
-    Object? portfolioCard = const $CopyWithPlaceholder(),
+    Object? informationCardComponent = const $CopyWithPlaceholder(),
-    Object? quoteCard = const $CopyWithPlaceholder(),
+    Object? portfolioCardComponent = const $CopyWithPlaceholder(),
-    Object? skillCard = const $CopyWithPlaceholder(),
+    Object? quoteCardComponent = const $CopyWithPlaceholder(),
+    Object? skillCardComponent = const $CopyWithPlaceholder(),
   }) {
     return ComponentThemeData(
-      topAppBar: topAppBar == const $CopyWithPlaceholder()
+      appBar: appBar == const $CopyWithPlaceholder()
-          ? _value.topAppBar
+          ? _value.appBar
           // ignore: cast_nullable_to_non_nullable
-          : topAppBar as TopAppBarComponent?,
+          : appBar as TopAppBarComponent?,
-      topNavigationBar: topNavigationBar == const $CopyWithPlaceholder()
+      topNavigationBarComponent:
-          ? _value.topNavigationBar
+          topNavigationBarComponent == const $CopyWithPlaceholder()
-          // ignore: cast_nullable_to_non_nullable
+              ? _value.topNavigationBarComponent
-          : topNavigationBar as TopNavigationBarComponent?,
+              // ignore: cast_nullable_to_non_nullable
+              : topNavigationBarComponent as TopNavigationBarComponent?,
       bottomNavigationBar: bottomNavigationBar == const $CopyWithPlaceholder()
           ? _value.bottomNavigationBar
           // ignore: cast_nullable_to_non_nullable
           : bottomNavigationBar as BottomNavigationBarComponent?,
-      error: error == const $CopyWithPlaceholder()
+      errorWidget: errorWidget == const $CopyWithPlaceholder()
-          ? _value.error
+          ? _value.errorWidget
           // ignore: cast_nullable_to_non_nullable
-          : error as ErrorComponent?,
+          : errorWidget as ErrorWidgetComponent?,
-      loader: loader == const $CopyWithPlaceholder()
+      loadingWidget: loadingWidget == const $CopyWithPlaceholder()
-          ? _value.loader
+          ? _value.loadingWidget
           // ignore: cast_nullable_to_non_nullable
-          : loader as LoaderComponent?,
+          : loadingWidget as LoadingWidgetComponent?,
-      richTextBuilder: richTextBuilder == const $CopyWithPlaceholder()
+      loaderComponent: loaderComponent == const $CopyWithPlaceholder()
-          ? _value.richTextBuilder
+          ? _value.loaderComponent
           // ignore: cast_nullable_to_non_nullable
-          : richTextBuilder as RichTextBuilderComponent?,
+          : loaderComponent as LoaderComponent?,
-      textInput: textInput == const $CopyWithPlaceholder()
+      richTextBuilderComponent:
-          ? _value.textInput
+          richTextBuilderComponent == const $CopyWithPlaceholder()
+              ? _value.richTextBuilderComponent
+              // ignore: cast_nullable_to_non_nullable
+              : richTextBuilderComponent as RichTextBuilderComponent?,
+      textInputComponent: textInputComponent == const $CopyWithPlaceholder()
+          ? _value.textInputComponent
           // ignore: cast_nullable_to_non_nullable
-          : textInput as TextInputComponent?,
+          : textInputComponent as TextInputComponent?,
-      fileSelectionButton: fileSelectionButton == const $CopyWithPlaceholder()
+      fileSelectionButtonComponent:
-          ? _value.fileSelectionButton
+          fileSelectionButtonComponent == const $CopyWithPlaceholder()
+              ? _value.fileSelectionButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : fileSelectionButtonComponent as FileSelectionButtonComponent?,
+      flatButtonComponent: flatButtonComponent == const $CopyWithPlaceholder()
+          ? _value.flatButtonComponent
           // ignore: cast_nullable_to_non_nullable
-          : fileSelectionButton as FileSelectionButtonComponent?,
+          : flatButtonComponent as FlatButtonComponent?,
-      flatButton: flatButton == const $CopyWithPlaceholder()
+      simpleIconButtonComponent:
-          ? _value.flatButton
+          simpleIconButtonComponent == const $CopyWithPlaceholder()
+              ? _value.simpleIconButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : simpleIconButtonComponent as SimpleIconButtonComponent?,
+      symbolButtonComponent:
+          symbolButtonComponent == const $CopyWithPlaceholder()
+              ? _value.symbolButtonComponent
+              // ignore: cast_nullable_to_non_nullable
+              : symbolButtonComponent as SymbolButtonComponent?,
+      informationCardComponent:
+          informationCardComponent == const $CopyWithPlaceholder()
+              ? _value.informationCardComponent
+              // ignore: cast_nullable_to_non_nullable
+              : informationCardComponent as InformationCardComponent?,
+      portfolioCardComponent:
+          portfolioCardComponent == const $CopyWithPlaceholder()
+              ? _value.portfolioCardComponent
+              // ignore: cast_nullable_to_non_nullable
+              : portfolioCardComponent as PortfolioCardComponent?,
+      quoteCardComponent: quoteCardComponent == const $CopyWithPlaceholder()
+          ? _value.quoteCardComponent
           // ignore: cast_nullable_to_non_nullable
-          : flatButton as FlatButtonComponent?,
+          : quoteCardComponent as QuoteCardComponent?,
-      simpleIconButton: simpleIconButton == const $CopyWithPlaceholder()
+      skillCardComponent: skillCardComponent == const $CopyWithPlaceholder()
-          ? _value.simpleIconButton
+          ? _value.skillCardComponent
           // ignore: cast_nullable_to_non_nullable
-          : simpleIconButton as SimpleIconButtonComponent?,
+          : skillCardComponent as SkillCardComponent?,
-      symbolButton: symbolButton == const $CopyWithPlaceholder()
-          ? _value.symbolButton
-          // ignore: cast_nullable_to_non_nullable
-          : symbolButton as SymbolButtonComponent?,
-      informationCard: informationCard == const $CopyWithPlaceholder()
-          ? _value.informationCard
-          // ignore: cast_nullable_to_non_nullable
-          : informationCard as InformationCardComponent?,
-      portfolioCard: portfolioCard == const $CopyWithPlaceholder()
-          ? _value.portfolioCard
-          // ignore: cast_nullable_to_non_nullable
-          : portfolioCard as PortfolioCardComponent?,
-      quoteCard: quoteCard == const $CopyWithPlaceholder()
-          ? _value.quoteCard
-          // ignore: cast_nullable_to_non_nullable
-          : quoteCard as QuoteCardComponent?,
-      skillCard: skillCard == const $CopyWithPlaceholder()
-          ? _value.skillCard
-          // ignore: cast_nullable_to_non_nullable
-          : skillCard as SkillCardComponent?,
     );
   }
 }

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

@@ -1,9 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
-import 'package:wyatt_ui_kit_example/cubit/app_mode_cubit.dart';
 
 class InformationCards extends StatelessWidget {
   const InformationCards({super.key});
@@ -45,21 +43,12 @@ class InformationCards extends StatelessWidget {
               const Gap(20),
               InformationCard(
                 background: Center(
-                  child: ColorFiltered(
+                  child: Container(
-                    colorFilter: ColorFilter.mode(
+                    decoration: const BoxDecoration(
-                      context.watch<AppModeCubit>().state.brightness ==
+                      image: DecorationImage(
-                              Brightness.light
+                        image: AssetImage('assets/images/asset_1.png'),
-                          ? Colors.grey.withOpacity(0.2)
+                        fit: BoxFit.fitHeight,
-                          : Colors.white.withOpacity(0.2),
+                        alignment: Alignment.centerRight,
-                      BlendMode.srcIn,
-                    ),
-                    child: Container(
-                      decoration: const BoxDecoration(
-                        image: DecorationImage(
-                          image: AssetImage('assets/images/asset_1.png'),
-                          fit: BoxFit.fitHeight,
-                          alignment: Alignment.centerRight,
-                        ),
                       ),
                     ),
                   ),
@@ -121,21 +110,12 @@ class InformationCards extends StatelessWidget {
               const Gap(20),
               InformationCard(
                 background: Center(
-                  child: ColorFiltered(
+                  child: Container(
-                    colorFilter: ColorFilter.mode(
+                    decoration: const BoxDecoration(
-                      context.watch<AppModeCubit>().state.brightness ==
+                      image: DecorationImage(
-                              Brightness.light
+                        image: AssetImage('assets/images/asset_1.png'),
-                          ? Colors.grey.withOpacity(0.2)
+                        fit: BoxFit.fitHeight,
-                          : Colors.white.withOpacity(0.2),
+                        alignment: Alignment.centerRight,
-                      BlendMode.srcIn,
-                    ),
-                    child: Container(
-                      decoration: const BoxDecoration(
-                        image: DecorationImage(
-                          image: AssetImage('assets/images/asset_1.png'),
-                          fit: BoxFit.fitHeight,
-                          alignment: Alignment.centerRight,
-                        ),
                       ),
                     ),
                   ),
@@ -148,9 +128,9 @@ class InformationCards extends StatelessWidget {
                 subtitle: TextWrapper(
                   'One single code base.',
                   style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        fontSize: 15,
+                    fontSize: 15,
-                        fontWeight: FontWeight.bold,
+                    fontWeight: FontWeight.bold,
-                      ),
+                  ),
                 ),
                 body: const TextWrapper(
                   'Cupidatat reprehenderit aliqua eiusmod Lorem. '

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

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
@@ -30,12 +31,10 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  CupertinoButton(
-                    label: const TextWrapper('En savoir plus'),
+                    color: Theme.of(context).primaryColor,
-                    suffix: const Icon(
+                    onPressed: () {},
-                      Icons.arrow_forward_ios,
+                    child: const Text('En savoir plus >'),
-                      size: 15,
-                    ),
                   ),
                 ],
                 assets: [
@@ -65,12 +64,10 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  CupertinoButton(
-                    label: const TextWrapper('En savoir plus'),
+                    color: Theme.of(context).primaryColor,
-                    suffix: const Icon(
+                    onPressed: () {},
-                      Icons.arrow_forward_ios,
+                    child: const Text('En savoir plus >'),
-                      size: 15,
-                    ),
                   ),
                 ],
                 assets: [
@@ -100,12 +97,10 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  CupertinoButton(
-                    label: const TextWrapper('En savoir plus'),
+                    color: Theme.of(context).primaryColor,
-                    suffix: const Icon(
+                    onPressed: () {},
-                      Icons.arrow_forward_ios,
+                    child: const Text('En savoir plus >'),
-                      size: 15,
-                    ),
                   ),
                 ],
                 assets: [
@@ -145,12 +140,10 @@ class PortfolioCards extends StatelessWidget {
                     'quis elit ut amet velit. Incididunt fugiat proident '
                     'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
-                  context.components.flatButtonComponent.call(
+                  CupertinoButton(
-                    label: const TextWrapper('En savoir plus'),
+                    color: Theme.of(context).primaryColor,
-                    suffix: const Icon(
+                    onPressed: () {},
-                      Icons.arrow_forward_ios,
+                    child: const Text('En savoir plus >'),
-                      size: 15,
-                    ),
                   ),
                 ],
                 assets: [

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

@@ -40,7 +40,7 @@ class SkillCards extends StatelessWidget {
                     padding: const EdgeInsets.all(15),
                     decoration: BoxDecoration(
                       shape: BoxShape.circle,
-                      color: Colors.grey.withOpacity(0.1),
+                      color: Colors.white.withOpacity(0.04),
                     ),
                     child: GradientIcon(
                       icon: Icons.ac_unit_sharp,
@@ -71,7 +71,7 @@ class SkillCards extends StatelessWidget {
                     padding: const EdgeInsets.all(15),
                     decoration: BoxDecoration(
                       shape: BoxShape.circle,
-                      color: Colors.grey.withOpacity(0.1),
+                      color: Colors.white.withOpacity(0.04),
                     ),
                     child: GradientIcon(
                       icon: Icons.ac_unit_sharp,

packages/wyatt_ui_kit/example/lib/cubit/app_mode_cubit.dart

@@ -1,24 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
-part 'app_mode_state.dart';
-
-class AppModeCubit extends Cubit<AppModeState> {
-  AppModeCubit({
-    required int theme,
-    required Brightness brightness,
-  }) : super(
-          AppModeState(
-            theme: theme,
-            brightness: brightness,
-          ),
-        );
-
-  void changeTheme(int theme) {
-    emit(state.copyWith(theme: theme));
-  }
-
-  void changeBrightness(Brightness brightness) {
-    emit(state.copyWith(brightness: brightness));
-  }
-}

packages/wyatt_ui_kit/example/lib/cubit/app_mode_state.dart

@@ -1,32 +0,0 @@
-// ignore_for_file: avoid_equals_and_hash_code_on_mutable_classes
-
-part of 'app_mode_cubit.dart';
-
-class AppModeState {
-  const AppModeState({
-    required this.theme,
-    required this.brightness,
-  });
-  final int theme;
-  final Brightness brightness;
-
-  AppModeState copyWith({
-    int? theme,
-    Brightness? brightness,
-  }) =>
-      AppModeState(
-        theme: theme ?? this.theme,
-        brightness: brightness ?? this.brightness,
-      );
-
-  @override
-  bool operator ==(Object other) =>
-      identical(this, other) ||
-      other is AppModeState &&
-          runtimeType == other.runtimeType &&
-          theme == other.theme &&
-          brightness == other.brightness;
-
-  @override
-  int get hashCode => theme.hashCode ^ brightness.hashCode;
-}

packages/wyatt_ui_kit/example/lib/home.dart

@@ -1,17 +1,16 @@
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_kit_example/bars/bars.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/cubit/app_mode_cubit.dart';
 import 'package:wyatt_ui_kit_example/demo_page.dart';
 import 'package:wyatt_ui_kit_example/loaders/loaders.dart';
 import 'package:wyatt_ui_kit_example/rich_text_builders/rich_text_builders.dart';
 import 'package:wyatt_ui_kit_example/text_input/text_inputs.dart';
+import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
 const String title = 'Wyatt UIKit Example';
-const List<String> themes = ['Material', 'Studio'];
 
 class Home extends StatefulWidget {
   const Home({super.key, this.forceIndex = 0});
@@ -76,34 +75,34 @@ class _HomeState extends State<Home> {
           actions: [
             Row(
               children: [
-                const Text('Dark'),
+                const Text('Mode'),
                 Switch.adaptive(
-                  value: context.watch<AppModeCubit>().state.brightness ==
+                  value:
-                      Brightness.dark,
+                      AdaptiveTheme.of(context).brightness == Brightness.dark,
-                  onChanged: (value) {
+                  onChanged: (_) {
-                    context.read<AppModeCubit>().changeBrightness(
+                    AdaptiveTheme.of(context).brightness == Brightness.light
-                          value ? Brightness.dark : Brightness.light,
+                        ? AdaptiveTheme.of(context).setDark()
-                        );
+                        : AdaptiveTheme.of(context).setLight();
                   },
                 ),
               ],
             ),
             const Gap(30),
-            DropdownButton<int>(
+            Row(
-              items: themes
+              children: [
-                  .map(
+                const Text('Studio'),
-                    (e) => DropdownMenuItem(
+                Switch.adaptive(
-                      value: themes.indexOf(e),
+                  value: Themes.currentThemeIndex == 1,
-                      child: Text(e),
+                  onChanged: (_) {
-                    ),
+                    setState(() {
-                  )
+                      Themes.currentThemeIndex =
-                  .toList(),
+                          (Themes.currentThemeIndex == 1) ? 0 : 1;
-              value: context.watch<AppModeCubit>().state.theme,
+                    });
-              onChanged: (value) {
+                    Themes.auto(context);
-                context.read<AppModeCubit>().changeTheme(value ?? 0);
+                  },
-              },
+                ),
-              hint: const Text('Theme'),
+              ],
-            ),
+            )
           ],
         ),
         body: Padding(

packages/wyatt_ui_kit/example/lib/main.dart

@@ -14,12 +14,11 @@
 // 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:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
-import 'package:wyatt_ui_kit_example/cubit/app_mode_cubit.dart';
 import 'package:wyatt_ui_kit_example/home.dart';
 import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
@@ -42,41 +41,28 @@ class App extends StatelessWidget {
   final int defaultTheme;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context) => AdaptiveTheme(
-    final brightness = WidgetsBinding.instance.window.platformBrightness;
+        initial: AdaptiveThemeMode.light,
-    return BlocProvider(
+        light: Themes.lightFromTheme(defaultTheme),
-      create: (context) => AppModeCubit(
+        dark: Themes.darkFromTheme(defaultTheme),
-        theme: defaultTheme,
+        builder: (light, dark) => ComponentTheme(
-        brightness: brightness,
+          data: WyattComponentThemeData.wyattComponentThemeData,
-      ),
+          child: MaterialApp(
-      child: Builder(
+            localizationsDelegates: const [
-        builder: (context) => BlocBuilder<AppModeCubit, AppModeState>(
+              GlobalMaterialLocalizations.delegate,
-          builder: (context, state) {
+              GlobalWidgetsLocalizations.delegate,
-            final light = Themes.lightFromTheme(state.theme);
+              GlobalCupertinoLocalizations.delegate,
-            final dark = Themes.darkFromTheme(state.theme);
+            ],
-            final theme = state.brightness == Brightness.light ? light : dark;
+            theme: light,
-            return ComponentTheme(
+            darkTheme: dark,
-              data: WyattComponentThemeData.wyattComponentThemeData,
+            supportedLocales: const [
-              child: MaterialApp(
+              Locale('fr', ''),
-                debugShowCheckedModeBanner: false,
+            ],
-                localizationsDelegates: const [
+            title: title,
-                  GlobalMaterialLocalizations.delegate,
+            home: Home(
-                  GlobalWidgetsLocalizations.delegate,
+              forceIndex: defaultPage,
-                  GlobalCupertinoLocalizations.delegate,
+            ),
-                ],
+          ),
-                theme: theme,
-                supportedLocales: const [
-                  Locale('fr', ''),
-                ],
-                title: title,
-                home: Home(
-                  forceIndex: defaultPage,
-                ),
-              ),
-            );
-          },
         ),
-      ),
+      );
-    );
-  }
 }

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

@@ -14,11 +14,10 @@
 // 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' hide CardTheme;
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
-import 'package:wyatt_ui_kit_example/cubit/app_mode_cubit.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {
@@ -47,11 +46,17 @@ abstract class Themes {
   }
 
   static void material(BuildContext context) {
-    context.read<AppModeCubit>().changeTheme(0);
+    AdaptiveTheme.of(context).setTheme(
+      light: materialLight,
+      dark: materialDark,
+    );
   }
 
   static void studio(BuildContext context) {
-    context.read<AppModeCubit>().changeTheme(1);
+    AdaptiveTheme.of(context).setTheme(
+      light: studioLight,
+      dark: studioDark,
+    );
   }
 
   static ThemeData get materialLight => ThemeData.light().copyWith(

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

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

packages/wyatt_ui_kit/example/macos/Podfile.lock

@@ -3,20 +3,27 @@ PODS:
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
+  - shared_preferences_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
 
 DEPENDENCIES:
   - FlutterMacOS (from `Flutter/ephemeral`)
   - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos`)
+  - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/macos`)
 
 EXTERNAL SOURCES:
   FlutterMacOS:
     :path: Flutter/ephemeral
   path_provider_foundation:
     :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos
+  shared_preferences_foundation:
+    :path: Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/macos
 
 SPEC CHECKSUMS:
   FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
   path_provider_foundation: c68054786f1b4f3343858c1e1d0caaded73f0be9
+  shared_preferences_foundation: 986fc17f3d3251412d18b0265f9c64113a8c2472
 
 PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
 

packages/wyatt_ui_kit/example/pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   flutter_localizations: { sdk: flutter }
   gap: ^2.0.1
   google_fonts: ^4.0.3
+  adaptive_theme: ^3.2.0
 
   wyatt_ui_components:
     hosted: https://git.wyatt-studio.fr/api/packages/Wyatt-FOSS/pub

packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart

@@ -91,6 +91,11 @@ class PortfolioCardHeader extends StatelessWidget {
                           ThemeHelper.maybeGetElement<MultiColor, Gradient>(
                         [
                           keywordsBackgroundColors,
+                          Theme.of(context)
+                              .extension<CardThemeExtension>()
+                              ?.borderColors,
+                          CardThemeExtensionDefault.from(Theme.of(context))
+                              .borderColors,
                         ],
                         valueValidator: (multiColor) => multiColor?.isGradient,
                         transform: (multiColor) =>

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

@@ -22,7 +22,8 @@ part 'gradient_icon.g.dart';
 
 @ComponentCopyWithExtension()
 class GradientIcon extends GradientIconComponent with $GradientIconCWMixin {
-  GradientIcon({
+  GradientIcon(
+    {
     required super.icon,
     required super.gradientColors,
     super.key,

packages/wyatt_ui_kit/lib/src/core/design_system/colors.dart

@@ -1,202 +0,0 @@
-// Copyright (C) 2023 WYATT GROUP
-// Please see the AUTHORS file for details.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import 'package:flutter/painting.dart';
-import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-
-class WyattColors {
-  WyattColors._();
-
-  /// Color: #24262A
-  static const Color black = Color(0xFF24262A);
-
-  /// Color: #3D92FA
-  static const Color blue1 = Color(0xFF3D92FA);
-
-  /// Color: #3C97FB
-  static const Color blue1Btn = Color(0xFF3C97FB);
-
-  /// Color: #83BEFF
-  static const Color blue1BtnFocus = Color(0xFF83BEFF);
-
-  /// Color: #4190E8
-  static const Color blue1BtnHover = Color(0xFF4190E8);
-
-  /// Color: #436EF4
-  static const Color blue2 = Color(0xFF436EF4);
-
-  /// Color: #446DF4
-  static const Color blue2Btn = Color(0xFF446DF4);
-
-  /// Color: #7897FF
-  static const Color blue2BtnFocus = Color(0xFF7897FF);
-
-  /// Color: #2D54D3
-  static const Color blue2BtnHover = Color(0xFF2D54D3);
-
-  /// Color: #4B68FF
-  static const Color darkBlue1 = Color(0xFF4B68FF);
-
-  /// Color: #3531F5
-  static const Color darkBlue2 = Color(0xFF3531F5);
-
-  /// Color: #60656A
-  static const Color gray1 = Color(0xFF60656A);
-
-  /// Color: #16191D
-  static const Color gray1Bg = Color(0xFF16191D);
-
-  /// Color: #26292D
-  static const Color gray1BgOpacity = Color(0xFF26292D);
-
-  /// Color: #2C3238
-  static const Color gray1Navbar = Color(0xFF2C3238);
-
-  /// Color: #383C40
-  static const Color gray2 = Color(0xFF383C40);
-
-  /// Color: #33373E
-  static const Color gray2Bg = Color(0xFF33373E);
-
-  /// Color: #202327
-  static const Color gray2BgOpacity = Color(0xFF202327);
-
-  /// Color: #272F3D
-  static const Color gray2Navbar = Color(0xFF272F3D);
-
-  /// Color: #2C3238
-  static const Color gray3Navbar = Color(0xFF2C3238);
-
-  /// Color: #50CE99
-  static const Color green1 = Color(0xFF50CE99);
-
-  /// Color: #339572
-  static const Color green2 = Color(0xFF339572);
-
-  /// Color: #F6F6F6
-  static const Color light = Color(0xFFF6F6F6);
-
-  /// Color: #DDE0E3
-  static const Color light1 = Color(0xFFDDE0E3);
-
-  /// Color: #CACCD4
-  static const Color light2 = Color(0xFFCACCD4);
-
-  /// Color: #E4EEF8
-  static const Color lightGray1 = Color(0xFFE4EEF8);
-
-  /// Color: #DADEE2
-  static const Color lightGray2 = Color(0xFFDADEE2);
-
-  /// Color: #B79EFF
-  static const Color purple1 = Color(0xFFB79EFF);
-
-  /// Color: #6865F2
-  static const Color purple2 = Color(0xFF6865F2);
-
-  /// Color: #FB5E3C
-  static const Color red1 = Color(0xFFFB5E3C);
-
-  /// Color: #F44464
-  static const Color red2 = Color(0xFFF44464);
-
-  /// Color: #FBAF3C
-  static const Color yellow1 = Color(0xFFFBAF3C);
-
-  /// Color: #F48344
-  static const Color yellow2 = Color(0xFFF48344);
-
-  static const MultiColor blueGradient = MultiColor([
-    WyattColors.blue1,
-    WyattColors.blue2,
-  ]);
-
-  static const MultiColor blueBtnGradient = MultiColor([
-    WyattColors.blue1Btn,
-    WyattColors.blue2Btn,
-  ]);
-
-  static const MultiColor blueBtnFocusGradient = MultiColor([
-    WyattColors.blue1BtnFocus,
-    WyattColors.blue2BtnFocus,
-  ]);
-
-  static const MultiColor blueBtnHoverGradient = MultiColor([
-    WyattColors.blue1BtnHover,
-    WyattColors.blue2BtnHover,
-  ]);
-
-  static const MultiColor darkBlueGradient = MultiColor([
-    WyattColors.darkBlue1,
-    WyattColors.darkBlue2,
-  ]);
-
-  static const MultiColor grayNavbarGradient = MultiColor([
-    WyattColors.gray1Navbar,
-    WyattColors.gray2Navbar,
-    WyattColors.gray3Navbar,
-  ]);
-
-  static const MultiColor lightGrayNavbarGradient = MultiColor([
-    WyattColors.gray1Navbar,
-    WyattColors.gray2Navbar,
-  ]);
-
-  static const MultiColor grayGradient = MultiColor([
-    WyattColors.gray1,
-    WyattColors.gray2,
-  ]);
-
-  static const MultiColor grayBgGradient = MultiColor([
-    WyattColors.gray1Bg,
-    WyattColors.gray2Bg,
-  ]);
-
-  static const MultiColor grayBgOpacityGradient = MultiColor([
-    WyattColors.gray1BgOpacity,
-    WyattColors.gray2BgOpacity,
-  ]);
-
-  static const MultiColor lightGrayGradient = MultiColor([
-    WyattColors.lightGray1,
-    WyattColors.lightGray2,
-  ]);
-
-  static const MultiColor lightGradient = MultiColor([
-    WyattColors.light1,
-    WyattColors.light2,
-  ]);
-
-  static const MultiColor purpleGradient = MultiColor([
-    WyattColors.purple1,
-    WyattColors.purple2,
-  ]);
-
-  static const MultiColor redGradient = MultiColor([
-    WyattColors.red1,
-    WyattColors.red2,
-  ]);
-
-  static const MultiColor yellowGradient = MultiColor([
-    WyattColors.yellow1,
-    WyattColors.yellow2,
-  ]);
-
-  static const MultiColor greenGradient = MultiColor([
-    WyattColors.green1,
-    WyattColors.green2,
-  ]);
-}

packages/wyatt_ui_kit/lib/src/data/theme_extensions/button_theme_extensions/button_theme_extensions.dart

@@ -1,16 +1,16 @@
 // 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/>.
 

packages/wyatt_ui_kit/lib/src/data/theme_extensions/card_theme_extension_impl.dart

@@ -16,7 +16,6 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_components/wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/core/design_system/colors.dart';
 
 /// {@template card_theme_extension_impl}
 /// Card theme extension that implements Wyatt Theme.
@@ -48,15 +47,18 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(25),
       stroke: 1,
-      backgroundColors: const MultiColor.single(WyattColors.light),
+      backgroundColors: const MultiColor.single(Color(0xFFF6F6F6)),
-      borderColors: WyattColors.lightGradient,
+      borderColors: const MultiColor([
+        Color(0xFFDDE0E3),
+        Color(0xFFCACCD4),
+      ]),
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
       bodyStyle: theme.textTheme.bodyMedium,
       minSize: const Size(330, 0),
       maxSize: const Size(390, double.infinity),
       shadow: BoxShadow(
-        color: WyattColors.black.withOpacity(0.05),
+        color: const Color(0xFF24262A).withOpacity(0.05),
         blurRadius: 30,
         offset: const Offset(0, 5),
       ),
@@ -72,15 +74,19 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(25),
       stroke: 1,
-      backgroundColors: WyattColors.grayBgOpacityGradient,
+      backgroundColors:
-      borderColors: WyattColors.grayGradient,
+          const MultiColor([Color(0xFF26292D), Color(0xFF202327)]),
+      borderColors: const MultiColor([
+        Color(0xFF60656A),
+        Color(0xFF383C40),
+      ]),
       titleStyle: theme.textTheme.titleLarge,
       subtitleStyle: theme.textTheme.titleMedium,
       bodyStyle: theme.textTheme.bodyMedium,
       minSize: const Size(330, 0),
       maxSize: const Size(390, double.infinity),
       shadow: BoxShadow(
-        color: WyattColors.black.withOpacity(0.15),
+        color: const Color(0xFF24262A).withOpacity(0.15),
         blurRadius: 30,
         offset: const Offset(0, 5),
       ),

packages/wyatt_ui_kit/lib/src/features/wyatt_component_theme_data.dart

@@ -22,22 +22,19 @@ import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 /// {@endtemplate}
 abstract class WyattComponentThemeData {
   /// {@macro wyatt_component_theme_data}
-  static const ComponentThemeData wyattComponentThemeData =
+  static ComponentThemeData get wyattComponentThemeData => ComponentThemeData(
-      ComponentThemeData.raw(
+        appBar: const TopAppBar(),
-    topAppBar: TopAppBar(),
+        topNavigationBarComponent: const TopNavigationBar(),
-    topNavigationBar: TopNavigationBar(),
+        loaderComponent: const Loader(),
-    // bottomNavigationBar: ,
+        richTextBuilderComponent: const RichTextBuilder(),
-    // error: ,
+        textInputComponent: const TextInput(),
-    loader: Loader(),
+        fileSelectionButtonComponent: const FileSelectionButton(),
-    richTextBuilder: RichTextBuilder(),
+        flatButtonComponent: const FlatButton(),
-    textInput: TextInput(),
+        simpleIconButtonComponent: const SimpleIconButton(),
-    fileSelectionButton: FileSelectionButton(),
+        symbolButtonComponent: const SymbolButton(),
-    flatButton: FlatButton(),
+        informationCardComponent: const InformationCard(),
-    simpleIconButton: SimpleIconButton(),
+        portfolioCardComponent: const PortfolioCard(),
-    symbolButton: SymbolButton(),
+        quoteCardComponent: const QuoteCard(),
-    informationCard: InformationCard(),
+        skillCardComponent: const SkillCard(),
-    portfolioCard: PortfolioCard(),
+      );
-    quoteCard: QuoteCard(),
-    skillCard: SkillCard(),
-  );
 }