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_loading_widget.dart';
+import 'package:wyatt_ui_components_example/components/custom_loader_widget.dart';
 
 class AppThemeComponent {
   static ComponentThemeData get components => const ComponentThemeData.raw(
-        appBar: CustomAppBar(),
+        topAppBar: CustomAppBar(),
         bottomNavigationBar: CustomBottomNavigationBar(),
-        errorWidget: CustomErrorWidget(),
+        error: CustomErrorWidget(),
-        loadingWidget: CustomLoadingWidget(),
+        loader: CustomLoaderWidget(),
       );
 }

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

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

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

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

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

@@ -2,17 +2,24 @@ 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_loading_widget.g.dart';
+part 'custom_loader_widget.g.dart';
 
 @ComponentCopyWithExtension()
-class CustomLoadingWidget extends LoadingWidgetComponent
+class CustomLoaderWidget extends LoaderComponent
-    with $CustomLoadingWidgetCWMixin {
+    with $CustomLoaderWidgetCWMixin {
-  const CustomLoadingWidget({super.color, super.key});
+  const CustomLoaderWidget({
+    super.colors,
+    super.duration,
+    super.flip,
+    super.radius,
+    super.stroke,
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) => Center(
         child: CircularProgressIndicator(
-          color: color,
+          color: colors?.color ?? Colors.blue,
         ),
       );
 }

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

@@ -0,0 +1,51 @@
+// 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.g.dart

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

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

@@ -18,10 +18,9 @@ export './bars/bars.dart';
 export './buttons/buttons.dart';
 export './cards/cards.dart';
 export './component.dart';
-export './error_widget_component.dart';
+export './error/error.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.dart

@@ -14,16 +14,4 @@
 // 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';
+export './error_component.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/error/error_component.dart

@@ -14,15 +14,29 @@
 // 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:flutter/widgets.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_widget_component.g.dart';
+part 'error_component.g.dart';
 
 @ComponentProxyExtension()
-abstract class ErrorWidgetComponent extends Component
+abstract class ErrorComponent extends Component
-    with CopyWithMixin<$ErrorWidgetComponentCWProxy> {
+    with CopyWithMixin<$ErrorComponentCWProxy> {
-  const ErrorWidgetComponent({required this.error, super.key});
+  const ErrorComponent({
-  final TextWrapper? error;
+    this.colors,
+    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/error_component.g.dart

@@ -0,0 +1,23 @@
+// 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.g.dart

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

@@ -1,16 +0,0 @@
-// 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/theme_extensions/top_bar_theme_extension.dart

@@ -84,7 +84,10 @@ class TopBarThemeExtension extends ThemeExtension<TopBarThemeExtension> {
       backgroundColors:
           MultiColor.lerp(backgroundColors, other.backgroundColors, t),
       selectedIndicatorColors: MultiColor.lerp(
-          selectedIndicatorColors, other.selectedIndicatorColors, t,),
+        selectedIndicatorColors,
+        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,7 +26,6 @@ class ComponentTheme extends StatelessWidget {
   const ComponentTheme({
     required this.child,
     required this.data,
-    this.themeExtensionProvider = const DefaultThemeExtensionProvider(),
     super.key,
   });
 
@@ -35,10 +34,6 @@ 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;
 
@@ -66,13 +61,9 @@ class ComponentTheme extends StatelessWidget {
   }
 
   @override
-  Widget build(BuildContext context) => Theme(
+  Widget build(BuildContext context) => _InheritedComponentTheme(
-        // Injections of the default extensions for the current brightness
-        data: themeExtensionProvider.applyExtensionsTo(Theme.of(context)),
-        child: _InheritedComponentTheme(
         this,
         child: child,
-        ),
       );
 }
 

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

@@ -15,6 +15,7 @@
 // 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';
 
@@ -23,82 +24,153 @@ part 'component_theme_data.g.dart';
 /// {@endtemplate}
 @CopyWith()
 class ComponentThemeData {
+  /// {@macro component_theme_data}
   factory ComponentThemeData({
-    TopAppBarComponent? appBar,
+    TopAppBarComponent? topAppBar,
-    TopNavigationBarComponent? topNavigationBarComponent,
+    TopNavigationBarComponent? topNavigationBar,
     BottomNavigationBarComponent? bottomNavigationBar,
-    ErrorWidgetComponent? errorWidget,
+    ErrorComponent? error,
-    LoadingWidgetComponent? loadingWidget,
+    LoaderComponent? loader,
-    LoaderComponent? loaderComponent,
+    RichTextBuilderComponent? richTextBuilder,
-    RichTextBuilderComponent? richTextBuilderComponent,
+    TextInputComponent? textInput,
-    TextInputComponent? textInputComponent,
+    FileSelectionButtonComponent? fileSelectionButton,
-    FileSelectionButtonComponent? fileSelectionButtonComponent,
+    FlatButtonComponent? flatButton,
-    FlatButtonComponent? flatButtonComponent,
+    SimpleIconButtonComponent? simpleIconButton,
-    SimpleIconButtonComponent? simpleIconButtonComponent,
+    SymbolButtonComponent? symbolButton,
-    SymbolButtonComponent? symbolButtonComponent,
+    InformationCardComponent? informationCard,
-    InformationCardComponent? informationCardComponent,
+    PortfolioCardComponent? portfolioCard,
-    PortfolioCardComponent? portfolioCardComponent,
+    QuoteCardComponent? quoteCard,
-    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCard,
-    SkillCardComponent? skillCardComponent,
   }) =>
       ComponentThemeData.raw(
-        appBar: appBar,
+        topAppBar: topAppBar,
-        topNavigationBarComponent: topNavigationBarComponent,
+        topNavigationBar: topNavigationBar,
         bottomNavigationBar: bottomNavigationBar,
-        errorWidget: errorWidget,
+        error: error,
-        loadingWidget: loadingWidget,
+        loader: loader,
-        loaderComponent: loaderComponent,
+        richTextBuilder: richTextBuilder,
-        richTextBuilderComponent: richTextBuilderComponent,
+        textInput: textInput,
-        textInputComponent: textInputComponent,
+        fileSelectionButton: fileSelectionButton,
-        fileSelectionButtonComponent: fileSelectionButtonComponent,
+        flatButton: flatButton,
-        flatButtonComponent: flatButtonComponent,
+        simpleIconButton: simpleIconButton,
-        simpleIconButtonComponent: simpleIconButtonComponent,
+        symbolButton: symbolButton,
-        symbolButtonComponent: symbolButtonComponent,
+        informationCard: informationCard,
-        informationCardComponent: informationCardComponent,
+        portfolioCard: portfolioCard,
-        portfolioCardComponent: portfolioCardComponent,
+        quoteCard: quoteCard,
-        quoteCardComponent: quoteCardComponent,
+        skillCard: skillCard,
-        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.appBar,
+    this.topAppBar,
-    this.topNavigationBarComponent,
+    this.topNavigationBar,
     this.bottomNavigationBar,
-    this.errorWidget,
+    this.error,
-    this.loadingWidget,
+    this.loader,
-    this.loaderComponent,
+    this.richTextBuilder,
-    this.richTextBuilderComponent,
+    this.textInput,
-    this.textInputComponent,
+    this.fileSelectionButton,
-    this.fileSelectionButtonComponent,
+    this.flatButton,
-    this.flatButtonComponent,
+    this.simpleIconButton,
-    this.simpleIconButtonComponent,
+    this.symbolButton,
-    this.symbolButtonComponent,
+    this.informationCard,
-    this.informationCardComponent,
+    this.portfolioCard,
-    this.portfolioCardComponent,
+    this.quoteCard,
-    this.quoteCardComponent,
+    this.skillCard,
-    this.skillCardComponent,
   });
 
-  final TopAppBarComponent? appBar;
+  R _get<T extends Component, R>(T? component, R? returned) {
+    if (component == null) {
+      throw FlutterError('No $T component provided.\n'
+          'Please provide a $T component in the ComponentThemeData.');
+    }
 
-  final TopNavigationBarComponent? topNavigationBarComponent;
+    if (returned == null) {
+      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;
-  final ErrorWidgetComponent? errorWidget;
+  $BottomNavigationBarComponentCWProxy get bottomNavigationBarComponent =>
-  final LoadingWidgetComponent? loadingWidget;
+      _get(bottomNavigationBar, bottomNavigationBar?.copyWith);
-  final LoaderComponent? loaderComponent;
 
-  final RichTextBuilderComponent? richTextBuilderComponent;
+  // CRUD Widgets
-  final TextInputComponent? textInputComponent;
+  final ErrorComponent? error;
-
+  $ErrorComponentCWProxy get errorComponent => _get(error, error?.copyWith);
-  // Buttons
+  final LoaderComponent? loader;
-  final FileSelectionButtonComponent? fileSelectionButtonComponent;
+  $LoaderComponentCWProxy get loaderComponent => _get(loader, loader?.copyWith);
-  final FlatButtonComponent? flatButtonComponent;
-  final SimpleIconButtonComponent? simpleIconButtonComponent;
-  final SymbolButtonComponent? symbolButtonComponent;
 
   // Cards
-  final InformationCardComponent? informationCardComponent;
+  final InformationCardComponent? informationCard;
-  final PortfolioCardComponent? portfolioCardComponent;
+  $InformationCardComponentCWProxy get informationCardComponent =>
-  final QuoteCardComponent? quoteCardComponent;
+      _get(informationCard, informationCard?.copyWith);
-  final SkillCardComponent? skillCardComponent;
+  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;
+  $FileSelectionButtonComponentCWProxy get fileSelectionButtonComponent =>
+      _get(fileSelectionButton, fileSelectionButton?.copyWith);
+  final FlatButtonComponent? flatButton;
+  $FlatButtonComponentCWProxy get flatButtonComponent =>
+      _get(flatButton, flatButton?.copyWith);
+  final SimpleIconButtonComponent? simpleIconButton;
+  $SimpleIconButtonComponentCWProxy get simpleIconButtonComponent =>
+      _get(simpleIconButton, simpleIconButton?.copyWith);
+  final SymbolButtonComponent? symbolButton;
+  $SymbolButtonComponentCWProxy get symbolButtonComponent =>
+      _get(symbolButton, symbolButton?.copyWith);
 }

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

@@ -7,46 +7,39 @@ part of 'component_theme_data.dart';
 // **************************************************************************
 
 abstract class _$ComponentThemeDataCWProxy {
-  ComponentThemeData appBar(TopAppBarComponent? appBar);
+  ComponentThemeData topAppBar(TopAppBarComponent? topAppBar);
 
-  ComponentThemeData topNavigationBarComponent(
+  ComponentThemeData topNavigationBar(
-      TopNavigationBarComponent? topNavigationBarComponent);
+      TopNavigationBarComponent? topNavigationBar);
 
   ComponentThemeData bottomNavigationBar(
       BottomNavigationBarComponent? bottomNavigationBar);
 
-  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget);
+  ComponentThemeData error(ErrorComponent? error);
 
-  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget);
+  ComponentThemeData loader(LoaderComponent? loader);
 
-  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent);
+  ComponentThemeData richTextBuilder(RichTextBuilderComponent? richTextBuilder);
 
-  ComponentThemeData richTextBuilderComponent(
+  ComponentThemeData textInput(TextInputComponent? textInput);
-      RichTextBuilderComponent? richTextBuilderComponent);
 
-  ComponentThemeData textInputComponent(TextInputComponent? textInputComponent);
+  ComponentThemeData fileSelectionButton(
+      FileSelectionButtonComponent? fileSelectionButton);
 
-  ComponentThemeData fileSelectionButtonComponent(
+  ComponentThemeData flatButton(FlatButtonComponent? flatButton);
-      FileSelectionButtonComponent? fileSelectionButtonComponent);
 
-  ComponentThemeData flatButtonComponent(
+  ComponentThemeData simpleIconButton(
-      FlatButtonComponent? flatButtonComponent);
+      SimpleIconButtonComponent? simpleIconButton);
 
-  ComponentThemeData simpleIconButtonComponent(
+  ComponentThemeData symbolButton(SymbolButtonComponent? symbolButton);
-      SimpleIconButtonComponent? simpleIconButtonComponent);
 
-  ComponentThemeData symbolButtonComponent(
+  ComponentThemeData informationCard(InformationCardComponent? informationCard);
-      SymbolButtonComponent? symbolButtonComponent);
 
-  ComponentThemeData informationCardComponent(
+  ComponentThemeData portfolioCard(PortfolioCardComponent? portfolioCard);
-      InformationCardComponent? informationCardComponent);
 
-  ComponentThemeData portfolioCardComponent(
+  ComponentThemeData quoteCard(QuoteCardComponent? quoteCard);
-      PortfolioCardComponent? portfolioCardComponent);
 
-  ComponentThemeData quoteCardComponent(QuoteCardComponent? quoteCardComponent);
+  ComponentThemeData skillCard(SkillCardComponent? skillCard);
-
-  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.
   ///
@@ -55,22 +48,21 @@ abstract class _$ComponentThemeDataCWProxy {
   /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
   /// ````
   ComponentThemeData call({
-    TopAppBarComponent? appBar,
+    TopAppBarComponent? topAppBar,
-    TopNavigationBarComponent? topNavigationBarComponent,
+    TopNavigationBarComponent? topNavigationBar,
     BottomNavigationBarComponent? bottomNavigationBar,
-    ErrorWidgetComponent? errorWidget,
+    ErrorComponent? error,
-    LoadingWidgetComponent? loadingWidget,
+    LoaderComponent? loader,
-    LoaderComponent? loaderComponent,
+    RichTextBuilderComponent? richTextBuilder,
-    RichTextBuilderComponent? richTextBuilderComponent,
+    TextInputComponent? textInput,
-    TextInputComponent? textInputComponent,
+    FileSelectionButtonComponent? fileSelectionButton,
-    FileSelectionButtonComponent? fileSelectionButtonComponent,
+    FlatButtonComponent? flatButton,
-    FlatButtonComponent? flatButtonComponent,
+    SimpleIconButtonComponent? simpleIconButton,
-    SimpleIconButtonComponent? simpleIconButtonComponent,
+    SymbolButtonComponent? symbolButton,
-    SymbolButtonComponent? symbolButtonComponent,
+    InformationCardComponent? informationCard,
-    InformationCardComponent? informationCardComponent,
+    PortfolioCardComponent? portfolioCard,
-    PortfolioCardComponent? portfolioCardComponent,
+    QuoteCardComponent? quoteCard,
-    QuoteCardComponent? quoteCardComponent,
+    SkillCardComponent? skillCard,
-    SkillCardComponent? skillCardComponent,
   });
 }
 
@@ -81,12 +73,13 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
   final ComponentThemeData _value;
 
   @override
-  ComponentThemeData appBar(TopAppBarComponent? appBar) => this(appBar: appBar);
+  ComponentThemeData topAppBar(TopAppBarComponent? topAppBar) =>
+      this(topAppBar: topAppBar);
 
   @override
-  ComponentThemeData topNavigationBarComponent(
+  ComponentThemeData topNavigationBar(
-          TopNavigationBarComponent? topNavigationBarComponent) =>
+          TopNavigationBarComponent? topNavigationBar) =>
-      this(topNavigationBarComponent: topNavigationBarComponent);
+      this(topNavigationBar: topNavigationBar);
 
   @override
   ComponentThemeData bottomNavigationBar(
@@ -94,66 +87,54 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
       this(bottomNavigationBar: bottomNavigationBar);
 
   @override
-  ComponentThemeData errorWidget(ErrorWidgetComponent? errorWidget) =>
+  ComponentThemeData error(ErrorComponent? error) => this(error: error);
-      this(errorWidget: errorWidget);
 
   @override
-  ComponentThemeData loadingWidget(LoadingWidgetComponent? loadingWidget) =>
+  ComponentThemeData loader(LoaderComponent? loader) => this(loader: loader);
-      this(loadingWidget: loadingWidget);
 
   @override
-  ComponentThemeData loaderComponent(LoaderComponent? loaderComponent) =>
+  ComponentThemeData richTextBuilder(
-      this(loaderComponent: loaderComponent);
+          RichTextBuilderComponent? richTextBuilder) =>
+      this(richTextBuilder: richTextBuilder);
 
   @override
-  ComponentThemeData richTextBuilderComponent(
+  ComponentThemeData textInput(TextInputComponent? textInput) =>
-          RichTextBuilderComponent? richTextBuilderComponent) =>
+      this(textInput: textInput);
-      this(richTextBuilderComponent: richTextBuilderComponent);
 
   @override
-  ComponentThemeData textInputComponent(
+  ComponentThemeData fileSelectionButton(
-          TextInputComponent? textInputComponent) =>
+          FileSelectionButtonComponent? fileSelectionButton) =>
-      this(textInputComponent: textInputComponent);
+      this(fileSelectionButton: fileSelectionButton);
 
   @override
-  ComponentThemeData fileSelectionButtonComponent(
+  ComponentThemeData flatButton(FlatButtonComponent? flatButton) =>
-          FileSelectionButtonComponent? fileSelectionButtonComponent) =>
+      this(flatButton: flatButton);
-      this(fileSelectionButtonComponent: fileSelectionButtonComponent);
 
   @override
-  ComponentThemeData flatButtonComponent(
+  ComponentThemeData simpleIconButton(
-          FlatButtonComponent? flatButtonComponent) =>
+          SimpleIconButtonComponent? simpleIconButton) =>
-      this(flatButtonComponent: flatButtonComponent);
+      this(simpleIconButton: simpleIconButton);
 
   @override
-  ComponentThemeData simpleIconButtonComponent(
+  ComponentThemeData symbolButton(SymbolButtonComponent? symbolButton) =>
-          SimpleIconButtonComponent? simpleIconButtonComponent) =>
+      this(symbolButton: symbolButton);
-      this(simpleIconButtonComponent: simpleIconButtonComponent);
 
   @override
-  ComponentThemeData symbolButtonComponent(
+  ComponentThemeData informationCard(
-          SymbolButtonComponent? symbolButtonComponent) =>
+          InformationCardComponent? informationCard) =>
-      this(symbolButtonComponent: symbolButtonComponent);
+      this(informationCard: informationCard);
 
   @override
-  ComponentThemeData informationCardComponent(
+  ComponentThemeData portfolioCard(PortfolioCardComponent? portfolioCard) =>
-          InformationCardComponent? informationCardComponent) =>
+      this(portfolioCard: portfolioCard);
-      this(informationCardComponent: informationCardComponent);
 
   @override
-  ComponentThemeData portfolioCardComponent(
+  ComponentThemeData quoteCard(QuoteCardComponent? quoteCard) =>
-          PortfolioCardComponent? portfolioCardComponent) =>
+      this(quoteCard: quoteCard);
-      this(portfolioCardComponent: portfolioCardComponent);
 
   @override
-  ComponentThemeData quoteCardComponent(
+  ComponentThemeData skillCard(SkillCardComponent? skillCard) =>
-          QuoteCardComponent? quoteCardComponent) =>
+      this(skillCard: skillCard);
-      this(quoteCardComponent: quoteCardComponent);
-
-  @override
-  ComponentThemeData skillCardComponent(
-          SkillCardComponent? skillCardComponent) =>
-      this(skillCardComponent: skillCardComponent);
 
   @override
 
@@ -164,95 +145,83 @@ class _$ComponentThemeDataCWProxyImpl implements _$ComponentThemeDataCWProxy {
   /// ComponentThemeData(...).copyWith(id: 12, name: "My name")
   /// ````
   ComponentThemeData call({
-    Object? appBar = const $CopyWithPlaceholder(),
+    Object? topAppBar = const $CopyWithPlaceholder(),
-    Object? topNavigationBarComponent = const $CopyWithPlaceholder(),
+    Object? topNavigationBar = const $CopyWithPlaceholder(),
     Object? bottomNavigationBar = const $CopyWithPlaceholder(),
-    Object? errorWidget = const $CopyWithPlaceholder(),
+    Object? error = const $CopyWithPlaceholder(),
-    Object? loadingWidget = const $CopyWithPlaceholder(),
+    Object? loader = const $CopyWithPlaceholder(),
-    Object? loaderComponent = const $CopyWithPlaceholder(),
+    Object? richTextBuilder = const $CopyWithPlaceholder(),
-    Object? richTextBuilderComponent = const $CopyWithPlaceholder(),
+    Object? textInput = const $CopyWithPlaceholder(),
-    Object? textInputComponent = const $CopyWithPlaceholder(),
+    Object? fileSelectionButton = const $CopyWithPlaceholder(),
-    Object? fileSelectionButtonComponent = const $CopyWithPlaceholder(),
+    Object? flatButton = const $CopyWithPlaceholder(),
-    Object? flatButtonComponent = const $CopyWithPlaceholder(),
+    Object? simpleIconButton = const $CopyWithPlaceholder(),
-    Object? simpleIconButtonComponent = const $CopyWithPlaceholder(),
+    Object? symbolButton = const $CopyWithPlaceholder(),
-    Object? symbolButtonComponent = const $CopyWithPlaceholder(),
+    Object? informationCard = const $CopyWithPlaceholder(),
-    Object? informationCardComponent = const $CopyWithPlaceholder(),
+    Object? portfolioCard = const $CopyWithPlaceholder(),
-    Object? portfolioCardComponent = const $CopyWithPlaceholder(),
+    Object? quoteCard = const $CopyWithPlaceholder(),
-    Object? quoteCardComponent = const $CopyWithPlaceholder(),
+    Object? skillCard = const $CopyWithPlaceholder(),
-    Object? skillCardComponent = const $CopyWithPlaceholder(),
   }) {
     return ComponentThemeData(
-      appBar: appBar == const $CopyWithPlaceholder()
+      topAppBar: topAppBar == const $CopyWithPlaceholder()
-          ? _value.appBar
+          ? _value.topAppBar
           // ignore: cast_nullable_to_non_nullable
-          : appBar as TopAppBarComponent?,
+          : topAppBar as TopAppBarComponent?,
-      topNavigationBarComponent:
+      topNavigationBar: topNavigationBar == const $CopyWithPlaceholder()
-          topNavigationBarComponent == const $CopyWithPlaceholder()
+          ? _value.topNavigationBar
-              ? _value.topNavigationBarComponent
           // ignore: cast_nullable_to_non_nullable
-              : topNavigationBarComponent as TopNavigationBarComponent?,
+          : topNavigationBar as TopNavigationBarComponent?,
       bottomNavigationBar: bottomNavigationBar == const $CopyWithPlaceholder()
           ? _value.bottomNavigationBar
           // ignore: cast_nullable_to_non_nullable
           : bottomNavigationBar as BottomNavigationBarComponent?,
-      errorWidget: errorWidget == const $CopyWithPlaceholder()
+      error: error == const $CopyWithPlaceholder()
-          ? _value.errorWidget
+          ? _value.error
           // ignore: cast_nullable_to_non_nullable
-          : errorWidget as ErrorWidgetComponent?,
+          : error as ErrorComponent?,
-      loadingWidget: loadingWidget == const $CopyWithPlaceholder()
+      loader: loader == const $CopyWithPlaceholder()
-          ? _value.loadingWidget
+          ? _value.loader
           // ignore: cast_nullable_to_non_nullable
-          : loadingWidget as LoadingWidgetComponent?,
+          : loader as LoaderComponent?,
-      loaderComponent: loaderComponent == const $CopyWithPlaceholder()
+      richTextBuilder: richTextBuilder == const $CopyWithPlaceholder()
-          ? _value.loaderComponent
+          ? _value.richTextBuilder
           // ignore: cast_nullable_to_non_nullable
-          : loaderComponent as LoaderComponent?,
+          : richTextBuilder as RichTextBuilderComponent?,
-      richTextBuilderComponent:
+      textInput: textInput == const $CopyWithPlaceholder()
-          richTextBuilderComponent == const $CopyWithPlaceholder()
+          ? _value.textInput
-              ? _value.richTextBuilderComponent
           // ignore: cast_nullable_to_non_nullable
-              : richTextBuilderComponent as RichTextBuilderComponent?,
+          : textInput as TextInputComponent?,
-      textInputComponent: textInputComponent == const $CopyWithPlaceholder()
+      fileSelectionButton: fileSelectionButton == const $CopyWithPlaceholder()
-          ? _value.textInputComponent
+          ? _value.fileSelectionButton
           // ignore: cast_nullable_to_non_nullable
-          : textInputComponent as TextInputComponent?,
+          : fileSelectionButton as FileSelectionButtonComponent?,
-      fileSelectionButtonComponent:
+      flatButton: flatButton == const $CopyWithPlaceholder()
-          fileSelectionButtonComponent == const $CopyWithPlaceholder()
+          ? _value.flatButton
-              ? _value.fileSelectionButtonComponent
           // ignore: cast_nullable_to_non_nullable
-              : fileSelectionButtonComponent as FileSelectionButtonComponent?,
+          : flatButton as FlatButtonComponent?,
-      flatButtonComponent: flatButtonComponent == const $CopyWithPlaceholder()
+      simpleIconButton: simpleIconButton == const $CopyWithPlaceholder()
-          ? _value.flatButtonComponent
+          ? _value.simpleIconButton
           // ignore: cast_nullable_to_non_nullable
-          : flatButtonComponent as FlatButtonComponent?,
+          : simpleIconButton as SimpleIconButtonComponent?,
-      simpleIconButtonComponent:
+      symbolButton: symbolButton == const $CopyWithPlaceholder()
-          simpleIconButtonComponent == const $CopyWithPlaceholder()
+          ? _value.symbolButton
-              ? _value.simpleIconButtonComponent
           // ignore: cast_nullable_to_non_nullable
-              : simpleIconButtonComponent as SimpleIconButtonComponent?,
+          : symbolButton as SymbolButtonComponent?,
-      symbolButtonComponent:
+      informationCard: informationCard == const $CopyWithPlaceholder()
-          symbolButtonComponent == const $CopyWithPlaceholder()
+          ? _value.informationCard
-              ? _value.symbolButtonComponent
           // ignore: cast_nullable_to_non_nullable
-              : symbolButtonComponent as SymbolButtonComponent?,
+          : informationCard as InformationCardComponent?,
-      informationCardComponent:
+      portfolioCard: portfolioCard == const $CopyWithPlaceholder()
-          informationCardComponent == const $CopyWithPlaceholder()
+          ? _value.portfolioCard
-              ? _value.informationCardComponent
           // ignore: cast_nullable_to_non_nullable
-              : informationCardComponent as InformationCardComponent?,
+          : portfolioCard as PortfolioCardComponent?,
-      portfolioCardComponent:
+      quoteCard: quoteCard == const $CopyWithPlaceholder()
-          portfolioCardComponent == const $CopyWithPlaceholder()
+          ? _value.quoteCard
-              ? _value.portfolioCardComponent
           // ignore: cast_nullable_to_non_nullable
-              : portfolioCardComponent as PortfolioCardComponent?,
+          : quoteCard as QuoteCardComponent?,
-      quoteCardComponent: quoteCardComponent == const $CopyWithPlaceholder()
+      skillCard: skillCard == const $CopyWithPlaceholder()
-          ? _value.quoteCardComponent
+          ? _value.skillCard
           // ignore: cast_nullable_to_non_nullable
-          : quoteCardComponent as QuoteCardComponent?,
+          : skillCard as SkillCardComponent?,
-      skillCardComponent: skillCardComponent == const $CopyWithPlaceholder()
-          ? _value.skillCardComponent
-          // ignore: cast_nullable_to_non_nullable
-          : skillCardComponent as SkillCardComponent?,
     );
   }
 }

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

@@ -91,11 +91,6 @@ 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,8 +22,7 @@ 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

@@ -0,0 +1,202 @@
+// 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/card_theme_extension_impl.dart

@@ -16,6 +16,7 @@
 
 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.
@@ -47,18 +48,15 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(25),
       stroke: 1,
-      backgroundColors: const MultiColor.single(Color(0xFFF6F6F6)),
+      backgroundColors: const MultiColor.single(WyattColors.light),
-      borderColors: const MultiColor([
+      borderColors: WyattColors.lightGradient,
-        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: const Color(0xFF24262A).withOpacity(0.05),
+        color: WyattColors.black.withOpacity(0.05),
         blurRadius: 30,
         offset: const Offset(0, 5),
       ),
@@ -74,19 +72,15 @@ class CardThemeExtensionImpl extends CardThemeExtension {
       radius: const BorderRadius.all(Radius.circular(12)),
       padding: const EdgeInsets.all(25),
       stroke: 1,
-      backgroundColors:
+      backgroundColors: WyattColors.grayBgOpacityGradient,
-          const MultiColor([Color(0xFF26292D), Color(0xFF202327)]),
+      borderColors: WyattColors.grayGradient,
-      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: const Color(0xFF24262A).withOpacity(0.15),
+        color: WyattColors.black.withOpacity(0.15),
         blurRadius: 30,
         offset: const Offset(0, 5),
       ),

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

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