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

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

@@ -22,7 +22,7 @@ abstract class CardComponent extends Component {
     this.radius = 12,
     this.padding = 25,
     this.borderColors,
-    this.backgroundColor,
+    this.backgroundColors,
     this.minSize = const Size(330, 230),
     this.maxSize = const Size(330, 530),
     this.shadow = const BoxShadow(
@@ -44,7 +44,7 @@ abstract class CardComponent extends Component {
   final List<Color>? borderColors;
 
   /// Card background color
-  final Color? backgroundColor;
+  final List<Color>? backgroundColors;
 
   /// Minimum size for this card
   final Size? minSize;

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

@@ -33,7 +33,7 @@ abstract class InformationCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/information_card_component.g.dart

@@ -15,7 +15,7 @@ abstract class $InformationCardComponentCWProxy {
   InformationCardComponent radius(double? radius);
   InformationCardComponent padding(double? padding);
   InformationCardComponent borderColors(List<Color>? borderColors);
-  InformationCardComponent backgroundColor(Color? backgroundColor);
+  InformationCardComponent backgroundColors(List<Color>? backgroundColors);
   InformationCardComponent minSize(Size? minSize);
   InformationCardComponent maxSize(Size? maxSize);
   InformationCardComponent shadow(BoxShadow? shadow);
@@ -30,7 +30,7 @@ abstract class $InformationCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

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

@@ -25,6 +25,7 @@ part 'portfolio_card_component.g.dart';
 abstract class PortfolioCardComponent extends CardComponent
     with CopyWithMixin<$PortfolioCardComponentCWProxy> {
   const PortfolioCardComponent({
+    this.secondaryBackgroundColors,
     this.showImagesOnTop,
     this.keyword,
     this.description,
@@ -36,7 +37,7 @@ abstract class PortfolioCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -52,4 +53,5 @@ abstract class PortfolioCardComponent extends CardComponent
   final TextWrapper? projectName;
   final TextWrapper? subtitle;
   final List<Widget>? ctas;
+  final Color? secondaryBackgroundColors;
 }

packages/wyatt_ui_components/lib/src/domain/entities/cards/portfolio_card_component.g.dart

@@ -7,6 +7,8 @@ part of 'portfolio_card_component.dart';
 // **************************************************************************
 
 abstract class $PortfolioCardComponentCWProxy {
+  PortfolioCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   PortfolioCardComponent showImagesOnTop(bool? showImagesOnTop);
   PortfolioCardComponent keyword(List<TextWrapper>? keyword);
   PortfolioCardComponent description(TextWrapper? description);
@@ -18,13 +20,14 @@ abstract class $PortfolioCardComponentCWProxy {
   PortfolioCardComponent radius(double? radius);
   PortfolioCardComponent padding(double? padding);
   PortfolioCardComponent borderColors(List<Color>? borderColors);
-  PortfolioCardComponent backgroundColor(Color? backgroundColor);
+  PortfolioCardComponent backgroundColors(List<Color>? backgroundColors);
   PortfolioCardComponent minSize(Size? minSize);
   PortfolioCardComponent maxSize(Size? maxSize);
   PortfolioCardComponent shadow(BoxShadow? shadow);
   PortfolioCardComponent background(Widget? background);
   PortfolioCardComponent key(Key? key);
   PortfolioCardComponent call({
+    Color? secondaryBackgroundColors,
     bool? showImagesOnTop,
     List<TextWrapper>? keyword,
     TextWrapper? description,
@@ -36,7 +39,7 @@ abstract class $PortfolioCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

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

@@ -35,7 +35,7 @@ abstract class QuoteCardComponent extends CardComponent
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,

packages/wyatt_ui_components/lib/src/domain/entities/cards/quote_card_component.g.dart

@@ -17,7 +17,7 @@ abstract class $QuoteCardComponentCWProxy {
   QuoteCardComponent radius(double? radius);
   QuoteCardComponent padding(double? padding);
   QuoteCardComponent borderColors(List<Color>? borderColors);
-  QuoteCardComponent backgroundColor(Color? backgroundColor);
+  QuoteCardComponent backgroundColors(List<Color>? backgroundColors);
   QuoteCardComponent minSize(Size? minSize);
   QuoteCardComponent maxSize(Size? maxSize);
   QuoteCardComponent shadow(BoxShadow? shadow);
@@ -34,7 +34,7 @@ abstract class $QuoteCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,

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

@@ -31,10 +31,11 @@ abstract class SkillCardComponent extends CardComponent
     this.description,
     this.skills,
     this.leadingIcon,
+    this.secondaryBackgroundColors,
     super.radius,
     super.padding,
     super.borderColors,
-    super.backgroundColor,
+    super.backgroundColors,
     super.minSize,
     super.maxSize,
     super.shadow,
@@ -48,4 +49,5 @@ abstract class SkillCardComponent extends CardComponent
   final TextWrapper? description;
   final List<TextWrapper>? skills;
   final IconData? leadingIcon;
+  final Color? secondaryBackgroundColors;
 }

packages/wyatt_ui_components/lib/src/domain/entities/cards/skill_card_component.g.dart

@@ -16,11 +16,13 @@ abstract class $SkillCardComponentCWProxy {
   SkillCardComponent radius(double? radius);
   SkillCardComponent padding(double? padding);
   SkillCardComponent borderColors(List<Color>? borderColors);
-  SkillCardComponent backgroundColor(Color? backgroundColor);
+  SkillCardComponent backgroundColors(List<Color>? backgroundColors);
   SkillCardComponent minSize(Size? minSize);
   SkillCardComponent maxSize(Size? maxSize);
   SkillCardComponent shadow(BoxShadow? shadow);
   SkillCardComponent background(Widget? background);
+  SkillCardComponent secondaryBackgroundColors(
+      Color? secondaryBackgroundColors);
   SkillCardComponent key(Key? key);
   SkillCardComponent call({
     IconData? icon,
@@ -32,11 +34,12 @@ abstract class $SkillCardComponentCWProxy {
     double? radius,
     double? padding,
     List<Color>? borderColors,
-    Color? backgroundColor,
+    List<Color>? backgroundColors,
     Size? minSize,
     Size? maxSize,
     BoxShadow? shadow,
     Widget? background,
+    Color? secondaryBackgroundColors,
     Key? key,
   });
 }

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

@@ -13,10 +13,7 @@ class Cards extends StatelessWidget {
         children: [
           Text(
             'Cards',
-            style: Theme.of(context)
+            style: Theme.of(context).textTheme.titleLarge,
-                .textTheme
-                .titleLarge!
-                .copyWith(color: Colors.white),
           ),
           const Gap(20),
           const InformationCards(),

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

@@ -11,13 +11,11 @@ class InformationCards extends StatelessWidget {
         children: [
           Text(
             'Information Cards',
-            style: Theme.of(context)
+            style: Theme.of(context).textTheme.titleMedium,
-                .textTheme
-                .titleMedium!
-                .copyWith(color: Colors.white),
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               InformationCard(
@@ -80,6 +78,7 @@ class InformationCards extends StatelessWidget {
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               InformationCard(
@@ -126,9 +125,9 @@ class InformationCards extends StatelessWidget {
                 axis: Axis.horizontal,
                 title: TextWrapper.text('Flutter'),
                 subtitle: 'One single code base.'.wrap(
-                  gradient: [Colors.blue, Colors.green],
+                  // gradient: [Colors.blue, Colors.green],
                   style: const TextStyle(
-                    fontWeight: FontWeight.w500,
+                    fontWeight: FontWeight.bold,
                   ),
                 ),
                 body: TextWrapper.text(

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

@@ -12,31 +12,29 @@ class PortfolioCards extends StatelessWidget {
         children: [
           Text(
             'Portfolio Cards',
-            style: Theme.of(context)
+            style: Theme.of(context).textTheme.titleMedium,
-                .textTheme
-                .titleMedium!
-                .copyWith(color: Colors.white),
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               PortfolioCard(
                 logo: const FlutterLogo(
                   size: 50,
                 ),
-                projectName: const TextWrapper('Flutter Project.'),
+                projectName: const TextWrapper('Flutter'),
                 subtitle: const TextWrapper('Mobile / Web / Macos.'),
-                description: const TextWrapper('Developpement de 8 mois.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
                   CupertinoButton(
-                    color: Colors.grey.withOpacity(0.3),
+                    color: Theme.of(context).primaryColor,
-                    padding: EdgeInsets.zero,
                     onPressed: () {},
-                    child: const Icon(
+                    child: const Text('En savoir plus >'),
-                      Icons.settings,
-                      color: Colors.grey,
-                    ),
                   ),
                 ],
                 assets: [
@@ -58,18 +56,18 @@ class PortfolioCards extends StatelessWidget {
                 logo: const FlutterLogo(
                   size: 50,
                 ),
-                projectName: const TextWrapper('Flutter Project.'),
+                projectName: const TextWrapper('Flutter'),
                 subtitle: const TextWrapper('Mobile / Web / Macos.'),
-                description: const TextWrapper('Developpement de 8 mois.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
                   CupertinoButton(
-                    color: Colors.grey.withOpacity(0.3),
+                    color: Theme.of(context).primaryColor,
-                    padding: EdgeInsets.zero,
                     onPressed: () {},
-                    child: const Icon(
+                    child: const Text('En savoir plus >'),
-                      Icons.settings,
-                      color: Colors.grey,
-                    ),
                   ),
                 ],
                 assets: [
@@ -84,24 +82,25 @@ class PortfolioCards extends StatelessWidget {
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               PortfolioCard(
                 logo: const FlutterLogo(
                   size: 50,
                 ),
-                projectName: const TextWrapper('Flutter Project.'),
+                projectName: const TextWrapper('Flutter'),
                 subtitle: const TextWrapper('Mobile / Web / Macos.'),
-                description: const TextWrapper('Developpement de 8 mois.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
                   CupertinoButton(
-                    color: Colors.grey.withOpacity(0.3),
+                    color: Theme.of(context).primaryColor,
-                    padding: EdgeInsets.zero,
                     onPressed: () {},
-                    child: const Icon(
+                    child: const Text('En savoir plus >'),
-                      Icons.settings,
-                      color: Colors.grey,
-                    ),
                   ),
                 ],
                 assets: [
@@ -128,23 +127,23 @@ class PortfolioCards extends StatelessWidget {
                   size: 50,
                 ),
                 projectName: const TextWrapper(
-                  'Flutter Project.',
+                  'Flutter',
                   gradient: [
                     Colors.blue,
                     Colors.green,
                   ],
                 ),
                 subtitle: const TextWrapper('Mobile / Web / Macos.'),
-                description: const TextWrapper('Developpement de 8 mois.'),
+                description: const TextWrapper(
+                    'Cupidatat reprehenderit aliqua eiusmod Lorem. '
+                    'Qui ipsum id ea ea nulla labore aute ullamco aute '
+                    'quis elit ut amet velit. Incididunt fugiat proident '
+                    'proident deserunt tempor Lorem cillum qui do '),
                 ctas: [
                   CupertinoButton(
-                    color: Colors.grey.withOpacity(0.3),
+                    color: Theme.of(context).primaryColor,
-                    padding: EdgeInsets.zero,
                     onPressed: () {},
-                    child: const Icon(
+                    child: const Text('En savoir plus >'),
-                      Icons.settings,
-                      color: Colors.grey,
-                    ),
                   ),
                 ],
                 assets: [

packages/wyatt_ui_kit/example/lib/cards/quote_card/quote_cards.dart

@@ -27,13 +27,11 @@ class QuoteCards extends StatelessWidget {
         children: [
           Text(
             'Quote Cards',
-            style: Theme.of(context)
+            style: Theme.of(context).textTheme.titleMedium,
-                .textTheme
-                .titleMedium!
-                .copyWith(color: Colors.white),
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               QuoteCard(

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

@@ -27,13 +27,11 @@ class SkillCards extends StatelessWidget {
         children: [
           Text(
             'Skill Cards',
-            style: Theme.of(context)
+            style: Theme.of(context).textTheme.titleMedium,
-                .textTheme
-                .titleMedium!
-                .copyWith(color: Colors.white),
           ),
           const Gap(20),
           Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               SkillCard(

packages/wyatt_ui_kit/example/lib/home.dart

@@ -0,0 +1,39 @@
+import 'package:adaptive_theme/adaptive_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_kit_example/cards/cards.dart';
+
+const String title = 'Wyatt Ui Kit Example';
+
+class Home extends StatefulWidget {
+  const Home({super.key});
+
+  @override
+  State<Home> createState() => _HomeState();
+}
+
+class _HomeState extends State<Home> {
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        drawer: const Drawer(),
+        appBar: AppBar(
+          title: const Text(title),
+          actions: [
+            Switch.adaptive(
+              value: AdaptiveTheme.of(context).isDefault,
+              onChanged: (_) {
+                AdaptiveTheme.of(context).isDefault
+                    ? AdaptiveTheme.of(context).setDark()
+                    : AdaptiveTheme.of(context).setLight();
+              },
+            )
+          ],
+        ),
+        body: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: ListView(
+            shrinkWrap: true,
+            children: const [Cards()],
+          ),
+        ),
+      );
+}

packages/wyatt_ui_kit/example/lib/main.dart

@@ -14,10 +14,12 @@
 // 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/cupertino.dart';
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:wyatt_ui_kit_example/cards/cards.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_kit_example/home.dart';
+import 'package:wyatt_ui_kit_example/theme_extension.dart';
 
 void main(List<String> args) {
   runApp(const App());
@@ -29,30 +31,101 @@ class App extends StatelessWidget {
   static const String title = 'Wyatt Ui Kit Example';
 
   @override
-  Widget build(BuildContext context) => CupertinoApp(
+  Widget build(BuildContext context) => AdaptiveTheme(
+        initial: AdaptiveThemeMode.light,
+        light: ThemeData.light().copyWith(
+          appBarTheme: AppBarTheme(
+            foregroundColor: const Color.fromRGBO(36, 38, 42, 1),
+            backgroundColor: Colors.white,
+            titleTextStyle: GoogleFonts.montserrat(
+              fontSize: 18,
+              fontWeight: FontWeight.w500,
+              color: const Color.fromRGBO(36, 38, 42, 1),
+            ),
+          ),
+          scaffoldBackgroundColor: Colors.white,
+          extensions: <ThemeExtension<dynamic>>[
+            CustomCardColorExtension(
+              backgroundColors: const [
+                Color.fromRGBO(246, 246, 246, 1),
+              ],
+              secondaryBackgroundColors: Colors.white,
+              borderColor: const [
+                Color.fromRGBO(221, 224, 227, 1),
+                Color.fromRGBO(202, 204, 212, 1),
+              ],
+              title: GoogleFonts.montserrat(
+                fontSize: 24,
+                fontWeight: FontWeight.w500,
+                color: const Color.fromRGBO(36, 38, 42, 1),
+              ),
+              subtitle: GoogleFonts.montserrat(
+                fontSize: 15,
+                fontWeight: FontWeight.w300,
+                color: const Color.fromRGBO(36, 38, 42, 1),
+              ),
+              body: GoogleFonts.montserrat(
+                fontSize: 12,
+                fontWeight: FontWeight.w300,
+                height: 1.7,
+                color: const Color.fromRGBO(36, 38, 42, 1),
+              ),
+            ),
+          ],
+        ),
+        dark: ThemeData.dark().copyWith(
+          appBarTheme: AppBarTheme(
+            foregroundColor: Colors.white,
+            backgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+            titleTextStyle: GoogleFonts.montserrat(
+              fontSize: 18,
+              fontWeight: FontWeight.w500,
+              color: Colors.white,
+            ),
+          ),
+          scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+          extensions: <ThemeExtension<dynamic>>[
+            CustomCardColorExtension(
+              secondaryBackgroundColors: Colors.white.withOpacity(0.04),
+              backgroundColors: [
+                Colors.white.withOpacity(0.04),
+              ],
+              borderColor: const [
+                Color.fromRGBO(96, 101, 106, 1),
+                Color.fromRGBO(56, 60, 64, 1),
+              ],
+              title: GoogleFonts.montserrat(
+                fontSize: 24,
+                fontWeight: FontWeight.w500,
+                color: Colors.white,
+              ),
+              subtitle: GoogleFonts.montserrat(
+                fontSize: 15,
+                fontWeight: FontWeight.w300,
+                color: Colors.white,
+              ),
+              body: GoogleFonts.montserrat(
+                fontSize: 12,
+                fontWeight: FontWeight.w300,
+                height: 1.7,
+                color: Colors.white,
+              ),
+            ),
+          ],
+        ),
+        builder: (light, dark) => MaterialApp(
           localizationsDelegates: const [
             GlobalMaterialLocalizations.delegate,
             GlobalWidgetsLocalizations.delegate,
             GlobalCupertinoLocalizations.delegate,
           ],
-        theme: const CupertinoThemeData(
+          theme: light,
-          primaryColor: Colors.blue,
+          darkTheme: dark,
-        ),
           supportedLocales: const [
             Locale('fr', ''),
           ],
           title: title,
-        home: CupertinoPageScaffold(
+          home: const Home(),
-          navigationBar: const CupertinoNavigationBar(
-            middle: Text(title),
-          ),
-          child: Padding(
-            padding: const EdgeInsets.all(8),
-            child: ListView(
-              shrinkWrap: true,
-              children: const [Cards()],
-            ),
-          ),
         ),
       );
 }

packages/wyatt_ui_kit/example/lib/theme_extension.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart' as ui_kit;
+
+class CustomCardColorExtension extends ui_kit.CardThemeExtension {
+  const CustomCardColorExtension({
+    super.backgroundColors,
+    super.secondaryBackgroundColors,
+    super.borderColor,
+    super.shadowColor,
+    super.body,
+    super.title,
+    super.subtitle,
+  });
+
+  @override
+  CustomCardColorExtension copyWith({
+    List<Color>? backgroundColors,
+    Color? secondaryBackgroundColors,
+    List<Color>? borderColor,
+    BoxShadow? shadowColor,
+    TextStyle? body,
+    TextStyle? title,
+    TextStyle? subtitle,
+  }) =>
+      CustomCardColorExtension(
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        secondaryBackgroundColors:
+            secondaryBackgroundColors ?? this.secondaryBackgroundColors,
+        borderColor: borderColor ?? this.borderColor,
+        body: body ?? this.body,
+        title: title ?? this.title,
+        subtitle: subtitle ?? this.subtitle,
+      );
+
+  @override
+  ThemeExtension<ui_kit.CardThemeExtension> lerp(
+    covariant ThemeExtension<ui_kit.CardThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! CustomCardColorExtension) {
+      return this;
+    }
+    return CustomCardColorExtension(
+      secondaryBackgroundColors: Color.lerp(
+        secondaryBackgroundColors,
+        other.secondaryBackgroundColors,
+        t,
+      ),
+      body: TextStyle.lerp(body, other.body, t),
+      title: TextStyle.lerp(title, other.title, t),
+      subtitle: TextStyle.lerp(subtitle, other.subtitle, t),
+    );
+  }
+}

packages/wyatt_ui_kit/example/macos/Flutter/Flutter-Debug.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
 #include "ephemeral/Flutter-Generated.xcconfig"

packages/wyatt_ui_kit/example/macos/Flutter/Flutter-Release.xcconfig

@@ -1 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
 #include "ephemeral/Flutter-Generated.xcconfig"

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

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

packages/wyatt_ui_kit/example/macos/Podfile

@@ -0,0 +1,40 @@
+platform :osx, '10.14'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'ephemeral', 'Flutter-Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure \"flutter pub get\" is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Flutter-Generated.xcconfig, then run \"flutter pub get\""
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_macos_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+  use_modular_headers!
+
+  flutter_install_all_macos_pods File.dirname(File.realpath(__FILE__))
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_macos_build_settings(target)
+  end
+end

packages/wyatt_ui_kit/example/macos/Podfile.lock

@@ -0,0 +1,23 @@
+PODS:
+  - FlutterMacOS (1.0.0)
+  - path_provider_foundation (0.0.1):
+    - Flutter
+    - FlutterMacOS
+
+DEPENDENCIES:
+  - FlutterMacOS (from `Flutter/ephemeral`)
+  - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos`)
+
+EXTERNAL SOURCES:
+  FlutterMacOS:
+    :path: Flutter/ephemeral
+  path_provider_foundation:
+    :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/macos
+
+SPEC CHECKSUMS:
+  FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
+  path_provider_foundation: 37748e03f12783f9de2cb2c4eadfaa25fe6d4852
+
+PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7
+
+COCOAPODS: 1.11.3

packages/wyatt_ui_kit/example/macos/Runner.xcodeproj/project.pbxproj

@@ -26,6 +26,7 @@
 		33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F22044A3C60003C045 /* Assets.xcassets */; };
 		33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; };
 		33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; };
+		A5F9CB8747FE7FB1F2C756B2 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BFE88646077DE7272E46720D /* Pods_Runner.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -54,7 +55,7 @@
 /* Begin PBXFileReference section */
 		333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = "<group>"; };
 		335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = "<group>"; };
-		33CC10ED2044A3C60003C045 /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "example.app"; sourceTree = BUILT_PRODUCTS_DIR; };
+		33CC10ED2044A3C60003C045 /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		33CC10F02044A3C60003C045 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		33CC10F22044A3C60003C045 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Assets.xcassets; path = Runner/Assets.xcassets; sourceTree = "<group>"; };
 		33CC10F52044A3C60003C045 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/MainMenu.xib; sourceTree = "<group>"; };
@@ -66,8 +67,12 @@
 		33E51913231747F40026EE4D /* DebugProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = DebugProfile.entitlements; sourceTree = "<group>"; };
 		33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = "<group>"; };
 		33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = "<group>"; };
+		59A88CF037B2829342F969BD /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = "<group>"; };
+		6C156257C212AAC0F946DB4B /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
 		7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = "<group>"; };
 		9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = "<group>"; };
+		AC438DBB762194E86CC967B1 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = "<group>"; };
+		BFE88646077DE7272E46720D /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -75,6 +80,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				A5F9CB8747FE7FB1F2C756B2 /* Pods_Runner.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -99,6 +105,7 @@
 				33CEB47122A05771004F2AC0 /* Flutter */,
 				33CC10EE2044A3C60003C045 /* Products */,
 				D73912EC22F37F3D000D13A0 /* Frameworks */,
+				6AE7C512D58B6E237819CA94 /* Pods */,
 			);
 			sourceTree = "<group>";
 		};
@@ -145,9 +152,21 @@
 			path = Runner;
 			sourceTree = "<group>";
 		};
+		6AE7C512D58B6E237819CA94 /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				6C156257C212AAC0F946DB4B /* Pods-Runner.debug.xcconfig */,
+				59A88CF037B2829342F969BD /* Pods-Runner.release.xcconfig */,
+				AC438DBB762194E86CC967B1 /* Pods-Runner.profile.xcconfig */,
+			);
+			name = Pods;
+			path = Pods;
+			sourceTree = "<group>";
+		};
 		D73912EC22F37F3D000D13A0 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				BFE88646077DE7272E46720D /* Pods_Runner.framework */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -159,11 +178,13 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */;
 			buildPhases = (
+				411BD9D4C8DC9AC52284FE47 /* [CP] Check Pods Manifest.lock */,
 				33CC10E92044A3C60003C045 /* Sources */,
 				33CC10EA2044A3C60003C045 /* Frameworks */,
 				33CC10EB2044A3C60003C045 /* Resources */,
 				33CC110E2044A8840003C045 /* Bundle Framework */,
 				3399D490228B24CF009A79C7 /* ShellScript */,
+				D4EE7FCF15B3694CC588D1E5 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -271,6 +292,45 @@
 			shellPath = /bin/sh;
 			shellScript = "\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh && touch Flutter/ephemeral/tripwire";
 		};
+		411BD9D4C8DC9AC52284FE47 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Runner-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		D4EE7FCF15B3694CC588D1E5 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputFileListPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */

packages/wyatt_ui_kit/example/macos/Runner.xcworkspace/contents.xcworkspacedata

@@ -4,4 +4,7 @@
    <FileRef
       location = "group:Runner.xcodeproj">
    </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
 </Workspace>

packages/wyatt_ui_kit/example/pubspec.yaml

@@ -14,6 +14,8 @@ dependencies:
     sdk: flutter
 
   gap: ^2.0.1
+  google_fonts: ^4.0.3
+  adaptive_theme: ^3.2.0
 
   wyatt_ui_kit:
     path: "../"

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,
+                textType: TextType.body,
-              ).toGradient(
+                style: body!.style,
-                LinearGradientHelper.fromNullableColors(
+                gradient: body!.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) =>
+  InformationCard backgroundColors(List<Color>? backgroundColors) =>
-      this(backgroundColor: backgroundColor);
+      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/components/cards/widgets/card_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';
 
 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,
+              textType: TextType.title,
-            ).toGradient(
+              style: title!.style,
-              LinearGradientHelper.fromNullableColors(title!.gradient),
+              gradient: title!.gradient,
             ),
           ],
           if (subtitle != null) ...[
             const Gap(_titlesLineSpacing),
-            Text(
+            CardText(
               subtitle!.text,
-              style: subtitle!.style ?? context.textTheme.titleSmall,
+              textType: TextType.subtitle,
-            ).toGradient(
+              style: subtitle!.style,
-              LinearGradientHelper.fromNullableColors(subtitle!.gradient),
+              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(
+              CardText(
-                description: description,
+                description!.text,
-                ctas: ctas,
+                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(
+              CardText(
-                description: description,
+                description!.text,
-                ctas: ctas,
+                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) =>
+  PortfolioCard backgroundColors(List<Color>? backgroundColors) =>
-      this(backgroundColor: backgroundColor);
+      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,33 +49,14 @@ class PortfolioCardHeader extends StatelessWidget {
           Row(
             children: [
               if (logo != null) logo!,
-              const Gap(10),
+              const Gap(_avatarAndTitlesSpacing),
-              Column(
+              Expanded(
-                crossAxisAlignment: CrossAxisAlignment.start,
+                child: InformationCardTitles(
-                children: [
+                  axis: Axis.horizontal,
-                  if (projectName != null)
+                  title: projectName,
-                    Text(
+                  subtitle: subtitle,
-                      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(10),
@@ -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 ??
+                textType: TextType.body,
-                    context.textTheme.bodyMedium
+                style: quote!.style,
-                        ?.copyWith(fontStyle: FontStyle.italic),
+                gradient: quote!.gradient,
-              ).toGradient(
-                LinearGradientHelper.fromNullableColors(
-                  quote!.gradient,
               ),
-              )
             ],
             const Gap(15),
             rightQuote ??
@@ -97,27 +93,28 @@ class QuoteCard extends QuoteCardComponent with $QuoteCardCWMixin {
                   avatar!,
                   const Gap(25),
                 ],
-                Column(
+                Expanded(
+                  child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       if (name != null) ...[
-                      Text(
+                        CardText(
                           name!.text,
-                        style: name!.style ?? context.textTheme.titleMedium,
+                          textType: TextType.body,
-                      ).toGradient(
+                          style: name!.style,
-                        LinearGradientHelper.fromNullableColors(
+                          gradient: name!.gradient,
-                          name!.gradient,
-                        ),
                         ),
                       ],
                       if (subtitle != null) ...[
-                      const Gap(5),
+                        CardText(
-                      Text(
                           subtitle!.text,
-                        style: subtitle!.style ?? context.textTheme.titleMedium,
+                          textType: TextType.subtitle,
-                      ).toGradient(gradient),
+                          style: subtitle!.style,
+                          gradient: subtitle!.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) =>
+  QuoteCard backgroundColors(List<Color>? backgroundColors) =>
-      this(backgroundColor: backgroundColor);
+      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,
+                textType: TextType.body,
-              ).toGradient(
+                style: description!.style,
-                LinearGradientHelper.fromNullableColors(description!.gradient),
+                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) =>
+  SkillCard backgroundColors(List<Color>? backgroundColors) =>
-      this(backgroundColor: backgroundColor);
+      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/domain/card_theme_extension.dart';
-import 'package:wyatt_ui_kit/src/core/extensions/extensions.dart';
-import 'package:wyatt_ui_kit/src/core/helpers/linear_gradient_helper.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)
+            Container(
-              GradientIcon(
+              padding: const EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: secondaryBackgroundColors ??
+                    Theme.of(context)
+                        .extension<CardThemeExtension>()
+                        ?.secondaryBackgroundColors,
+              ),
+              child: gradient != null
+                  ? GradientIcon(
                       icon,
-                size: 60,
+                      size: 45,
                       gradient: LinearGradient(colors: gradient!),
                     )
-            else
+                  : Icon(
-              Icon(
                       icon,
-                size: 60,
+                      size: 45,
+                    ),
             ),
             const Gap(25),
             Column(
               children: [
                 if (title != null) ...[
-                  Text(
+                  CardText(
                     title!.text,
-                    style: title!.style ?? context.textTheme.titleLarge,
+                    textType: TextType.title,
-                  ).toGradient(
+                    style: title!.style,
-                    LinearGradientHelper.fromNullableColors(
+                    gradient: title!.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,
+                      textType: TextType.body,
-                    ).toGradient(
+                      style: e.style,
-                      LinearGradientHelper.fromNullableColors(e.gradient),
+                      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,7 +51,22 @@ class _CardWrapperState extends State<CardWrapper> {
   @override
   void initState() {
     super.initState();
+    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(() {
@@ -58,7 +74,6 @@ class _CardWrapperState extends State<CardWrapper> {
             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,
+            gradient: _cardGradient(context),
-            border: GradientBoxBorder(
+            color: _cardColor(context),
-              gradient: LinearGradient(
+            border: _boxBorder(context),
-                colors: (widget.borderColors != null &&
+            boxShadow: _shadow(context),
-                        widget.borderColors!.length >= 2)
-                    ? widget.borderColors!
-                    : [
-                        Theme.of(context).cardColor,
-                        Theme.of(context).cardColor
-                      ],
-              ),
-              width: 1,
-            ),
-            boxShadow: [
-              if (widget.shadow != null) ...[widget.shadow!]
-            ],
           ),
           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';