feat(ui_kit): add card theme extension, fix bugs & update example (close #126)

packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.dart

@@ -20,10 +20,8 @@ import 'package:wyatt_component_copy_with_extension/component_copy_with_extensio
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/cards/information_card/widgets/information_card_horizontal_header.dart';
 import 'package:wyatt_ui_kit/src/components/cards/information_card/widgets/information_card_vertical_header.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
 
 part 'information_card.g.dart';
 
@@ -41,7 +39,7 @@ class InformationCard extends InformationCardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize = const Size(330, double.infinity),
     super.shadow,
@@ -53,7 +51,7 @@ class InformationCard extends InformationCardComponent
   Widget build(BuildContext context) => CardWrapper(
         background: background,
         padding: padding,
-        backgroundColor: backgroundColor,
+        backgroundColors: backgroundColors,
         borderColors: borderColors,
         shadow: shadow,
         maxSize: maxSize,
@@ -74,17 +72,15 @@ class InformationCard extends InformationCardComponent
                 axis: axis,
                 title: title,
                 subtitle: subtitle,
-              )
+              ),
             ],
             if (body != null) ...[
               const Gap(_bodyTopSpacing),
-              Text(
+              CardText(
                 body!.text,
-                style: body!.style ?? context.textTheme.bodyMedium,
-              ).toGradient(
-                LinearGradientHelper.fromNullableColors(
-                  body!.gradient,
-                ),
+                textType: TextType.body,
+                style: body!.style,
+                gradient: body!.gradient,
               ),
             ],
           ],

packages/wyatt_ui_kit/lib/src/components/cards/information_card/information_card.g.dart

@@ -27,8 +27,8 @@ class $InformationCardCWProxyImpl implements $InformationCardComponentCWProxy {
   InformationCard borderColors(List<Color>? borderColors) =>
       this(borderColors: borderColors);
   @override
-  InformationCard backgroundColor(Color? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
+  InformationCard backgroundColors(List<Color>? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
   @override
   InformationCard minSize(Size? minSize) => this(minSize: minSize);
   @override
@@ -50,7 +50,7 @@ class $InformationCardCWProxyImpl implements $InformationCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,
@@ -66,7 +66,7 @@ class $InformationCardCWProxyImpl implements $InformationCardComponentCWProxy {
         radius: radius ?? _value.radius,
         padding: padding ?? _value.padding,
         borderColors: borderColors ?? _value.borderColors,
-        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        backgroundColors: backgroundColors ?? _value.backgroundColors,
         minSize: minSize ?? _value.minSize,
         maxSize: maxSize ?? _value.maxSize,
         shadow: shadow ?? _value.shadow,

packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_horizontal_header.dart

@@ -41,12 +41,14 @@ class InformationCardHorizontalHeader extends StatelessWidget {
           if (icons?.first != null) ...[
             icons!.first,
             const Gap(_avatarAndTitlesSpacing),
-            InformationCardTitles(
+          ],
+          Expanded(
+            child: InformationCardTitles(
               title: title,
               subtitle: subtitle,
               axis: axis,
             ),
-          ],
+          ),
         ],
       );
 }

packages/wyatt_ui_kit/lib/src/components/cards/information_card/widgets/information_card_titles.dart

@@ -17,9 +17,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 
 const _titlesLineSpacing = 5.0;
 
@@ -42,20 +40,20 @@ class InformationCardTitles extends StatelessWidget {
             : CrossAxisAlignment.center,
         children: [
           if (title != null) ...[
-            Text(
+            CardText(
               title!.text,
-              style: title!.style ?? context.textTheme.titleLarge,
-            ).toGradient(
-              LinearGradientHelper.fromNullableColors(title!.gradient),
+              textType: TextType.title,
+              style: title!.style,
+              gradient: title!.gradient,
             ),
           ],
           if (subtitle != null) ...[
             const Gap(_titlesLineSpacing),
-            Text(
+            CardText(
               subtitle!.text,
-              style: subtitle!.style ?? context.textTheme.titleSmall,
-            ).toGradient(
-              LinearGradientHelper.fromNullableColors(subtitle!.gradient),
+              textType: TextType.subtitle,
+              style: subtitle!.style,
+              gradient: subtitle!.gradient,
             ),
           ],
         ],

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

@@ -18,9 +18,9 @@ import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_description.dart';
 import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_header.dart';
 import 'package:wyatt_ui_kit/src/components/cards/portfolio_card/widgets/portfolio_card_images.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
 
 part 'portfolio_card.g.dart';
@@ -39,7 +39,8 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
+    super.secondaryBackgroundColors,
     super.minSize,
     super.maxSize = const Size(330, double.infinity),
     super.shadow,
@@ -51,13 +52,12 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
   Widget build(BuildContext context) => CardWrapper(
         background: background,
         padding: padding,
-        backgroundColor: backgroundColor,
+        backgroundColors: backgroundColors,
         borderColors: borderColors,
         shadow: shadow,
         maxSize: maxSize,
         minSize: minSize,
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
           children: [
             if (showImagesOnTop ?? false) ...[
@@ -69,12 +69,15 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
                 ),
                 const Gap(20),
               ],
-              PortfolioCardDescription(
-                description: description,
-                ctas: ctas,
+              CardText(
+                description!.text,
+                textType: TextType.body,
+                style: description!.style,
+                gradient: description!.gradient,
               ),
-              const Gap(10),
+              const Gap(20),
               PortfolioCardHeader(
+                secondaryBackgroundColors: secondaryBackgroundColors,
                 logo: logo,
                 padding: padding,
                 radius: radius,
@@ -84,6 +87,7 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
               ),
             ] else ...[
               PortfolioCardHeader(
+                secondaryBackgroundColors: secondaryBackgroundColors,
                 logo: logo,
                 padding: padding,
                 radius: radius,
@@ -100,11 +104,14 @@ class PortfolioCard extends PortfolioCardComponent with $PortfolioCardCWMixin {
                 ),
                 const Gap(20),
               ],
-              PortfolioCardDescription(
-                description: description,
-                ctas: ctas,
+              CardText(
+                description!.text,
+                textType: TextType.body,
+                style: description!.style,
+                gradient: description!.gradient,
               ),
             ],
+            if (ctas != null) ...[const Gap(20), ...ctas!],
           ],
         ),
       );

packages/wyatt_ui_kit/lib/src/components/cards/portfolio_card/portfolio_card.g.dart

@@ -10,6 +10,9 @@ class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
   const $PortfolioCardCWProxyImpl(this._value);
   final PortfolioCard _value;
   @override
+  PortfolioCard secondaryBackgroundColors(Color? secondaryBackgroundColors) =>
+      this(secondaryBackgroundColors: secondaryBackgroundColors);
+  @override
   PortfolioCard showImagesOnTop(bool? showImagesOnTop) =>
       this(showImagesOnTop: showImagesOnTop);
   @override
@@ -36,8 +39,8 @@ class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
   PortfolioCard borderColors(List<Color>? borderColors) =>
       this(borderColors: borderColors);
   @override
-  PortfolioCard backgroundColor(Color? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
+  PortfolioCard backgroundColors(List<Color>? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
   @override
   PortfolioCard minSize(Size? minSize) => this(minSize: minSize);
   @override
@@ -50,6 +53,7 @@ class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
   PortfolioCard key(Key? key) => this(key: key);
   @override
   PortfolioCard call({
+    Color? secondaryBackgroundColors,
     bool? showImagesOnTop,
     List<TextWrapper>? keyword,
     TextWrapper? description,
@@ -61,7 +65,7 @@ class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,
@@ -80,7 +84,9 @@ class $PortfolioCardCWProxyImpl implements $PortfolioCardComponentCWProxy {
         radius: radius ?? _value.radius,
         padding: padding ?? _value.padding,
         borderColors: borderColors ?? _value.borderColors,
-        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        backgroundColors: backgroundColors ?? _value.backgroundColors,
+        secondaryBackgroundColors:
+            secondaryBackgroundColors ?? _value.secondaryBackgroundColors,
         minSize: minSize ?? _value.minSize,
         maxSize: maxSize ?? _value.maxSize,
         shadow: shadow ?? _value.shadow,

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

@@ -1,60 +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/material.dart';
-import 'package:gap/gap.dart';
-import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
-
-class PortfolioCardDescription extends StatelessWidget {
-  const PortfolioCardDescription({
-    this.description,
-    this.ctas,
-    super.key,
-  });
-
-  final TextWrapper? description;
-  final List<Widget>? ctas;
-
-  @override
-  Widget build(BuildContext context) => Row(
-        children: [
-          if (description != null) ...[
-            Expanded(
-              child: Text(
-                description!.text,
-                style: description!.style ?? context.textTheme.bodyMedium,
-              ).toGradient(
-                LinearGradientHelper.fromNullableColors(
-                  description!.gradient,
-                ),
-              ),
-            ),
-          ],
-          if (ctas != null) ...[
-            const Gap(5),
-            ...ctas!.map(
-              (e) => Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 5),
-                child: e,
-              ),
-            ),
-          ],
-        ],
-      );
-}

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

@@ -17,9 +17,11 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/src/components/cards/information_card/widgets/information_card_titles.dart';
 import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
 
+const _avatarAndTitlesSpacing = 25.0;
+
 class PortfolioCardHeader extends StatelessWidget {
   const PortfolioCardHeader({
     this.logo,
@@ -28,6 +30,7 @@ class PortfolioCardHeader extends StatelessWidget {
     this.projectName,
     this.subtitle,
     this.keyword,
+    this.secondaryBackgroundColors,
     super.key,
   });
 
@@ -37,6 +40,7 @@ class PortfolioCardHeader extends StatelessWidget {
   final TextWrapper? projectName;
   final TextWrapper? subtitle;
   final List<TextWrapper>? keyword;
+  final Color? secondaryBackgroundColors;
 
   @override
   Widget build(BuildContext context) => Column(
@@ -45,32 +49,13 @@ class PortfolioCardHeader extends StatelessWidget {
           Row(
             children: [
               if (logo != null) logo!,
-              const Gap(10),
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (projectName != null)
-                    Text(
-                      projectName!.text,
-                      style:
-                          projectName!.style ?? context.textTheme.titleMedium,
-                    ).toGradient(
-                      LinearGradientHelper.fromNullableColors(
-                        projectName!.gradient,
-                      ),
-                    ),
-                  if (subtitle != null) ...[
-                    const Gap(5),
-                    Text(
-                      subtitle!.text,
-                      style: subtitle!.style ?? context.textTheme.titleSmall,
-                    ).toGradient(
-                      LinearGradientHelper.fromNullableColors(
-                        subtitle!.gradient,
-                      ),
-                    ),
-                  ],
-                ],
+              const Gap(_avatarAndTitlesSpacing),
+              Expanded(
+                child: InformationCardTitles(
+                  axis: Axis.horizontal,
+                  title: projectName,
+                  subtitle: subtitle,
+                ),
               ),
             ],
           ),
@@ -83,7 +68,10 @@ class PortfolioCardHeader extends StatelessWidget {
                     margin: const EdgeInsets.all(3),
                     padding: const EdgeInsets.all(6),
                     decoration: BoxDecoration(
-                      color: Theme.of(context).focusColor,
+                      color: secondaryBackgroundColors ??
+                          Theme.of(context)
+                              .extension<CardThemeExtension>()
+                              ?.secondaryBackgroundColors,
                       borderRadius: BorderRadius.circular(8),
                     ),
                     child: Text(

packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.dart

@@ -17,12 +17,12 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_component_copy_with_extension/component_copy_with_extension.dart';
-
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
 import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
+
 part 'quote_card.g.dart';
 
 @ComponentCopyWithExtension()
@@ -38,7 +38,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -50,7 +50,7 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
   Widget build(BuildContext context) => CardWrapper(
         background: background,
         padding: padding,
-        backgroundColor: backgroundColor,
+        backgroundColors: backgroundColors,
         borderColors: borderColors,
         shadow: shadow,
         maxSize: maxSize,
@@ -69,16 +69,12 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
                   ),
                 ),
             if (quote != null) ...[
-              Text(
+              CardText(
                 quote!.text,
-                style: quote!.style ??
-                    context.textTheme.bodyMedium
-                        ?.copyWith(fontStyle: FontStyle.italic),
-              ).toGradient(
-                LinearGradientHelper.fromNullableColors(
-                  quote!.gradient,
-                ),
-              )
+                textType: TextType.body,
+                style: quote!.style,
+                gradient: quote!.gradient,
+              ),
             ],
             const Gap(15),
             rightQuote ??
@@ -97,27 +93,28 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
                   avatar!,
                   const Gap(25),
                 ],
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    if (name != null) ...[
-                      Text(
-                        name!.text,
-                        style: name!.style ?? context.textTheme.titleMedium,
-                      ).toGradient(
-                        LinearGradientHelper.fromNullableColors(
-                          name!.gradient,
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      if (name != null) ...[
+                        CardText(
+                          name!.text,
+                          textType: TextType.body,
+                          style: name!.style,
+                          gradient: name!.gradient,
                         ),
-                      ),
+                      ],
+                      if (subtitle != null) ...[
+                        CardText(
+                          subtitle!.text,
+                          textType: TextType.subtitle,
+                          style: subtitle!.style,
+                          gradient: subtitle!.gradient,
+                        ),
+                      ],
                     ],
-                    if (subtitle != null) ...[
-                      const Gap(5),
-                      Text(
-                        subtitle!.text,
-                        style: subtitle!.style ?? context.textTheme.titleMedium,
-                      ).toGradient(gradient),
-                    ],
-                  ],
+                  ),
                 )
               ],
             ),

packages/wyatt_ui_kit/lib/src/components/cards/quote_card/quote_card.g.dart

@@ -31,8 +31,8 @@ class $QuoteCardCWProxyImpl implements $QuoteCardComponentCWProxy {
   QuoteCard borderColors(List<Color>? borderColors) =>
       this(borderColors: borderColors);
   @override
-  QuoteCard backgroundColor(Color? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
+  QuoteCard backgroundColors(List<Color>? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
   @override
   QuoteCard minSize(Size? minSize) => this(minSize: minSize);
   @override
@@ -55,7 +55,7 @@ class $QuoteCardCWProxyImpl implements $QuoteCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,
@@ -73,7 +73,7 @@ class $QuoteCardCWProxyImpl implements $QuoteCardComponentCWProxy {
         radius: radius ?? _value.radius,
         padding: padding ?? _value.padding,
         borderColors: borderColors ?? _value.borderColors,
-        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        backgroundColors: backgroundColors ?? _value.backgroundColors,
         minSize: minSize ?? _value.minSize,
         maxSize: maxSize ?? _value.maxSize,
         shadow: shadow ?? _value.shadow,

packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.dart

@@ -20,10 +20,9 @@ import 'package:wyatt_component_copy_with_extension/component_copy_with_extensio
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
 import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_header.dart';
 import 'package:wyatt_ui_kit/src/components/cards/skill_card/widgets/skill_card_skills.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/cards/widgets/card_wrapper.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/helpers.dart';
+
 part 'skill_card.g.dart';
 
 @ComponentCopyWithExtension()
@@ -31,6 +30,7 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
   const SkillCard({
     super.icon,
     super.gradient,
+    super.secondaryBackgroundColors,
     super.title,
     super.description,
     super.skills,
@@ -38,7 +38,7 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize = const Size(330, double.infinity),
     super.shadow,
@@ -50,7 +50,7 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
   Widget build(BuildContext context) => CardWrapper(
         background: background,
         padding: padding,
-        backgroundColor: backgroundColor,
+        backgroundColors: backgroundColors,
         borderColors: borderColors,
         shadow: shadow,
         maxSize: maxSize,
@@ -59,17 +59,18 @@ class SkillCard extends SkillCardComponent with $SkillCardCWMixin {
           mainAxisSize: MainAxisSize.min,
           children: [
             SkillCardHeader(
+              secondaryBackgroundColors: secondaryBackgroundColors,
               icon: icon,
               title: title,
               gradient: gradient,
             ),
             const Gap(25),
             if (description != null) ...[
-              Text(
+              CardText(
                 description!.text,
-                style: description!.style ?? context.textTheme.bodyMedium,
-              ).toGradient(
-                LinearGradientHelper.fromNullableColors(description!.gradient),
+                textType: TextType.body,
+                style: description!.style,
+                gradient: description!.gradient,
               ),
               const Gap(25),
             ],

packages/wyatt_ui_kit/lib/src/components/cards/skill_card/skill_card.g.dart

@@ -24,6 +24,9 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
   SkillCard leadingIcon(IconData? leadingIcon) =>
       this(leadingIcon: leadingIcon);
   @override
+  SkillCard secondaryBackgroundColors(Color? secondaryBackgroundColors) =>
+      this(secondaryBackgroundColors: secondaryBackgroundColors);
+  @override
   SkillCard radius(double? radius) => this(radius: radius);
   @override
   SkillCard padding(double? padding) => this(padding: padding);
@@ -31,8 +34,8 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
   SkillCard borderColors(List<Color>? borderColors) =>
       this(borderColors: borderColors);
   @override
-  SkillCard backgroundColor(Color? backgroundColor) =>
-      this(backgroundColor: backgroundColor);
+  SkillCard backgroundColors(List<Color>? backgroundColors) =>
+      this(backgroundColors: backgroundColors);
   @override
   SkillCard minSize(Size? minSize) => this(minSize: minSize);
   @override
@@ -51,10 +54,11 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
     TextWrapper? description,
     List<TextWrapper>? skills,
     IconData? leadingIcon,
+    Color? secondaryBackgroundColors,
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,
@@ -64,6 +68,8 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
       SkillCard(
         icon: icon ?? _value.icon,
         gradient: gradient ?? _value.gradient,
+        secondaryBackgroundColors:
+            secondaryBackgroundColors ?? _value.secondaryBackgroundColors,
         title: title ?? _value.title,
         description: description ?? _value.description,
         skills: skills ?? _value.skills,
@@ -71,7 +77,7 @@ class $SkillCardCWProxyImpl implements $SkillCardComponentCWProxy {
         radius: radius ?? _value.radius,
         padding: padding ?? _value.padding,
         borderColors: borderColors ?? _value.borderColors,
-        backgroundColor: backgroundColor ?? _value.backgroundColor,
+        backgroundColors: backgroundColors ?? _value.backgroundColors,
         minSize: minSize ?? _value.minSize,
         maxSize: maxSize ?? _value.maxSize,
         shadow: shadow ?? _value.shadow,

packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_header.dart

@@ -17,44 +17,57 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
+import 'package:wyatt_ui_kit/src/domain/card_theme_extension.dart';
 
 class SkillCardHeader extends StatelessWidget {
-  const SkillCardHeader({super.key, this.icon, this.title, this.gradient});
+  const SkillCardHeader({
+    super.key,
+    this.icon,
+    this.title,
+    this.gradient,
+    this.secondaryBackgroundColors,
+  });
 
   final IconData? icon;
   final TextWrapper? title;
   final List<Color>? gradient;
+  final Color? secondaryBackgroundColors;
 
   @override
   Widget build(BuildContext context) => Column(
         children: [
           if (icon != null) ...[
-            if (gradient != null)
-              GradientIcon(
-                icon,
-                size: 60,
-                gradient: LinearGradient(colors: gradient!),
-              )
-            else
-              Icon(
-                icon,
-                size: 60,
+            Container(
+              padding: const EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: secondaryBackgroundColors ??
+                    Theme.of(context)
+                        .extension<CardThemeExtension>()
+                        ?.secondaryBackgroundColors,
               ),
+              child: gradient != null
+                  ? GradientIcon(
+                      icon,
+                      size: 45,
+                      gradient: LinearGradient(colors: gradient!),
+                    )
+                  : Icon(
+                      icon,
+                      size: 45,
+                    ),
+            ),
             const Gap(25),
             Column(
               children: [
                 if (title != null) ...[
-                  Text(
+                  CardText(
                     title!.text,
-                    style: title!.style ?? context.textTheme.titleLarge,
-                  ).toGradient(
-                    LinearGradientHelper.fromNullableColors(
-                      title!.gradient,
-                    ),
+                    textType: TextType.title,
+                    style: title!.style,
+                    gradient: title!.gradient,
                   ),
                 ],
               ],

packages/wyatt_ui_kit/lib/src/components/cards/skill_card/widgets/skill_card_skills.dart

@@ -17,9 +17,8 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/src/components/cards/widgets/card_text.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_icon.dart';
-import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/theme_extensions.dart';
 import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.dart';
 
 class SkillCardSkills extends StatelessWidget {
@@ -47,11 +46,11 @@ class SkillCardSkills extends StatelessWidget {
                   ),
                   const Gap(10),
                   Expanded(
-                    child: Text(
+                    child: CardText(
                       e.text,
-                      style: e.style ?? context.textTheme.bodyMedium,
-                    ).toGradient(
-                      LinearGradientHelper.fromNullableColors(e.gradient),
+                      textType: TextType.body,
+                      style: e.style,
+                      gradient: e.gradient,
                     ),
                   ),
                 ],

packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_text.dart

@@ -0,0 +1,66 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_kit/src/components/gradients/gradient_text.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+enum TextType {
+  title,
+  subtitle,
+  body;
+}
+
+class CardText extends StatelessWidget {
+  const CardText(
+    this.data, {
+    required this.textType,
+    this.gradient,
+    this.style,
+    super.key,
+  });
+  final TextType textType;
+  final TextStyle? style;
+  final List<Color>? gradient;
+  final String data;
+
+  TextStyle? _getStyle(BuildContext context) {
+    if (style != null) {
+      return style;
+    } else {
+      final cardThemeExtension =
+          Theme.of(context).extension<CardThemeExtension>();
+      switch (textType) {
+        case TextType.title:
+          return cardThemeExtension?.title ?? context.textTheme.titleLarge;
+        case TextType.subtitle:
+          return cardThemeExtension?.subtitle ?? context.textTheme.titleMedium;
+        case TextType.body:
+          return cardThemeExtension?.body ?? context.textTheme.bodyMedium;
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) => Text(
+        data,
+        style: _getStyle(context),
+      ).toGradient(
+        LinearGradientHelper.fromNullableColors(
+          gradient,
+        ),
+      );
+}

packages/wyatt_ui_kit/lib/src/components/cards/widgets/card_wrapper.dart

@@ -16,11 +16,12 @@
 
 import 'package:flutter/material.dart';
 import 'package:wyatt_ui_kit/src/components/gradients/gradient_box_border.dart';
+import 'package:wyatt_ui_kit/src/domain/card_theme_extension.dart';
 
 class CardWrapper extends StatefulWidget {
   const CardWrapper({
     required this.child,
-    required this.backgroundColor,
+    required this.backgroundColors,
     required this.borderColors,
     required this.shadow,
     required this.minSize,
@@ -32,7 +33,7 @@ class CardWrapper extends StatefulWidget {
 
   final Widget? background;
   final Widget child;
-  final Color? backgroundColor;
+  final List<Color>? backgroundColors;
   final List<Color>? borderColors;
   final BoxShadow? shadow;
   final Size? minSize;
@@ -50,15 +51,29 @@ class _CardWrapperState extends State<CardWrapper> {
   @override
   void initState() {
     super.initState();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      final RenderObject? renderBox = _key.currentContext?.findRenderObject();
-      if (renderBox != null) {
-        setState(() {
-          _cardSize =
-              Size(renderBox.paintBounds.width, renderBox.paintBounds.height);
-        });
-      }
-    });
+    if (widget.background != null) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _resizeCard();
+      });
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant CardWrapper oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.background != null) {
+      _resizeCard();
+    }
+  }
+
+  void _resizeCard() {
+    final RenderObject? renderBox = _key.currentContext?.findRenderObject();
+    if (renderBox != null) {
+      setState(() {
+        _cardSize =
+            Size(renderBox.paintBounds.width, renderBox.paintBounds.height);
+      });
+    }
   }
 
   Widget _buildChild(Widget child) => (widget.background != null)
@@ -85,28 +100,99 @@ class _CardWrapperState extends State<CardWrapper> {
           child: child,
         );
 
+  Gradient? _cardGradient(BuildContext context) {
+    if (widget.backgroundColors != null &&
+        widget.backgroundColors!.length >= 2) {
+      return LinearGradient(colors: widget.backgroundColors!);
+    } else {
+      final extensionCardColor =
+          Theme.of(context).extension<CardThemeExtension>();
+
+      if (extensionCardColor != null &&
+          extensionCardColor.backgroundColors != null &&
+          extensionCardColor.backgroundColors!.length >= 2) {
+        return LinearGradient(colors: extensionCardColor.backgroundColors!);
+      }
+    }
+    return null;
+  }
+
+  Color? _cardColor(BuildContext context) {
+    if (widget.backgroundColors != null &&
+        widget.backgroundColors!.length == 1) {
+      return widget.backgroundColors!.first;
+    } else {
+      final extensionCardColor =
+          Theme.of(context).extension<CardThemeExtension>();
+
+      if (extensionCardColor != null &&
+          extensionCardColor.backgroundColors != null &&
+          extensionCardColor.backgroundColors!.length == 1) {
+        return extensionCardColor.backgroundColors!.first;
+      }
+    }
+    return Theme.of(context).cardColor;
+  }
+
+  BoxBorder? _boxBorder(BuildContext context) {
+    if (widget.borderColors != null) {
+      if (widget.borderColors!.length >= 2) {
+        return GradientBoxBorder(
+          gradient: LinearGradient(
+            colors: widget.borderColors!,
+          ),
+        );
+      } else if (widget.borderColors!.isNotEmpty) {
+        return Border.all(
+          color: widget.borderColors!.first,
+        );
+      }
+    } else {
+      final extensionCardColor =
+          Theme.of(context).extension<CardThemeExtension>();
+      if (extensionCardColor != null &&
+          extensionCardColor.borderColor != null) {
+        if (extensionCardColor.borderColor!.length >= 2) {
+          return GradientBoxBorder(
+            gradient: LinearGradient(
+              colors: extensionCardColor.borderColor!,
+            ),
+          );
+        } else if (extensionCardColor.backgroundColors!.isNotEmpty) {
+          return Border.all(
+            color: extensionCardColor.backgroundColors!.first,
+          );
+        }
+      }
+    }
+    return null;
+  }
+
+  List<BoxShadow> _shadow(BuildContext context) {
+    final shadows = List<BoxShadow>.empty(growable: true);
+    if (widget.shadow != null) {
+      shadows.add(widget.shadow!);
+    } else {
+      final extensionCardColor =
+          Theme.of(context).extension<CardThemeExtension>();
+      if (extensionCardColor != null &&
+          extensionCardColor.shadowColor != null) {
+        shadows.add(extensionCardColor.shadowColor!);
+      }
+    }
+    return shadows;
+  }
+
   @override
   Widget build(BuildContext context) => SelectionArea(
         child: DecoratedBox(
           key: _key,
           decoration: BoxDecoration(
             borderRadius: const BorderRadius.all(Radius.circular(12)),
-            color: widget.backgroundColor ?? Theme.of(context).cardColor,
-            border: GradientBoxBorder(
-              gradient: LinearGradient(
-                colors: (widget.borderColors != null &&
-                        widget.borderColors!.length >= 2)
-                    ? widget.borderColors!
-                    : [
-                        Theme.of(context).cardColor,
-                        Theme.of(context).cardColor
-                      ],
-              ),
-              width: 1,
-            ),
-            boxShadow: [
-              if (widget.shadow != null) ...[widget.shadow!]
-            ],
+            gradient: _cardGradient(context),
+            color: _cardColor(context),
+            border: _boxBorder(context),
+            boxShadow: _shadow(context),
           ),
           child: (widget.minSize != null && widget.maxSize != null)
               ? ConstrainedBox(

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

@@ -17,7 +17,7 @@
 import 'package:flutter/painting.dart';
 
 class GradientBoxBorder extends BoxBorder {
-  const GradientBoxBorder({this.gradient, this.width = 0});
+  const GradientBoxBorder({this.gradient, this.width = 1});
 
   final Gradient? gradient;
   final double width;

packages/wyatt_ui_kit/lib/src/domain/card_theme_extension.dart

@@ -0,0 +1,40 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+
+abstract class CardThemeExtension extends ThemeExtension<CardThemeExtension> {
+  const CardThemeExtension({
+    this.backgroundColors,
+    this.secondaryBackgroundColors,
+    this.borderColor,
+    this.shadowColor,
+    this.body,
+    this.title,
+    this.subtitle,
+  });
+
+  // Colors
+  final List<Color>? backgroundColors;
+  final Color? secondaryBackgroundColors;
+  final List<Color>? borderColor;
+  final BoxShadow? shadowColor;
+
+  // TextStyles
+  final TextStyle? body;
+  final TextStyle? title;
+  final TextStyle? subtitle;
+}

packages/wyatt_ui_kit/lib/src/src.dart

@@ -32,3 +32,4 @@
 
 export './components/components.dart';
 export './core/core.dart';
+export './domain/card_theme_extension.dart';