refactor(ui): rework text gradient and text wrapper

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

@@ -31,8 +31,14 @@ class FlatButtons extends StatelessWidget {
           ),
           const Gap(20),
           Center(
+            /// You can overwrite global textstyle of the label with [label],
+            /// but if you only want to override the color/gradient of the text
+            /// in a particular case you can override the style that will
+            /// be merge during the build.
             child: FlatButton(
-              label: const TextWrapper('Voir notre savoir faire'),
+              label: const TextWrapper(
+                'Voir notre savoir faire',
+              ),
             ),
           ),
           const Gap(20),

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

@@ -18,13 +18,13 @@ class InformationCards extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              InformationCard(
-                icons: const [
+              const InformationCard(
+                icons: [
                   FlutterLogo(size: 60),
                   FlutterLogo(size: 60),
                   FlutterLogo(size: 60),
                 ],
-                title: const TextWrapper('Flutter'),
+                title: TextWrapper('Flutter'),
                 subtitle: TextWrapper.text('One single code base.'),
                 body: TextWrapper.text(
                   'Cupidatat reprehenderit aliqua eiusmod Lorem. '
@@ -58,9 +58,9 @@ class InformationCards extends StatelessWidget {
                   FlutterLogo(size: 60),
                 ],
                 title: 'Flutter'.wrap(
-                  gradient: [Colors.blue, Colors.green],
+                  gradientColors: const MultiColor([Colors.blue, Colors.green]),
                 ),
-                subtitle: TextWrapper.text('One single code base.'),
+                subtitle: const TextWrapper.text('One single code base.'),
                 body: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                         'Qui ipsum id ea ea nulla labore aute ullamco aute '
                         'quis elit ut amet velit. Incididunt fugiat proident '
@@ -86,8 +86,8 @@ class InformationCards extends StatelessWidget {
                   FlutterLogo(size: 60),
                 ],
                 axis: Axis.horizontal,
-                title: TextWrapper.text('Flutter'),
-                subtitle: TextWrapper.text('One single code base.'),
+                title: const TextWrapper.text('Flutter'),
+                subtitle: const TextWrapper.text('One single code base.'),
                 body: 'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                         'Qui ipsum id ea ea nulla labore aute ullamco aute '
                         'quis elit ut amet velit. Incididunt fugiat proident '
@@ -100,10 +100,10 @@ class InformationCards extends StatelessWidget {
                         'magna cupidatat Lorem nulla cupidatat voluptate '
                         'irure ex reprehenderit.'
                     .wrap(
-                  gradient: [
+                  gradientColors: const MultiColor([
                     Colors.red,
                     Colors.orange,
-                  ],
+                  ]),
                 ),
               ),
               const Gap(20),
@@ -123,14 +123,14 @@ class InformationCards extends StatelessWidget {
                   FlutterLogo(size: 60),
                 ],
                 axis: Axis.horizontal,
-                title: TextWrapper.text('Flutter'),
+                title: const TextWrapper.text('Flutter'),
                 subtitle: 'One single code base.'.wrap(
                   // gradient: [Colors.blue, Colors.green],
                   style: const TextStyle(
                     fontWeight: FontWeight.bold,
                   ),
                 ),
-                body: TextWrapper.text(
+                body: const TextWrapper.text(
                   'Cupidatat reprehenderit aliqua eiusmod Lorem. '
                   'Qui ipsum id ea ea nulla labore aute ullamco aute '
                   'quis elit ut amet velit. Incididunt fugiat proident '

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

@@ -128,10 +128,10 @@ class PortfolioCards extends StatelessWidget {
                 ),
                 projectName: const TextWrapper(
                   'Flutter',
-                  gradient: [
+                  gradientColors: MultiColor([
                     Colors.blue,
                     Colors.green,
-                  ],
+                  ]),
                 ),
                 subtitle: const TextWrapper('Mobile / Web / Macos.'),
                 description: const TextWrapper(

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

@@ -49,7 +49,12 @@ class QuoteCards extends StatelessWidget {
                         'quis elit ut amet velit. Incididunt fugiat proident '
                         'proident deserunt tempor Lorem cillum qui do '
                         'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
-                    .wrap(gradient: [Colors.red, Colors.orange]),
+                    .wrap(
+                  gradientColors: const MultiColor([
+                    Colors.red,
+                    Colors.orange,
+                  ]),
+                ),
                 avatar: const FlutterLogo(
                   size: 40,
                 ),

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

@@ -44,7 +44,7 @@ class SkillCards extends StatelessWidget {
                         'proident deserunt tempor Lorem cillum qui do '
                         'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
                     .wrap(),
-                skills: [
+                skills: const [
                   TextWrapper.text('Firebase'),
                   TextWrapper.text(
                     'Qui ipsum id ea ea nulla labore aute ullamco aute ',
@@ -62,11 +62,14 @@ class SkillCards extends StatelessWidget {
                         'proident deserunt tempor Lorem cillum qui do '
                         'ullamco Lorem magna ipsum. Ullamco cupidatat velit '
                     .wrap(),
-                skills: [
+                skills: const [
                   TextWrapper.text('Firebase'),
-                  const TextWrapper(
+                  TextWrapper(
                     'Qui ipsum id ea ea nulla labore aute ullamco aute ',
-                    gradient: [Colors.red, Colors.orange],
+                    gradientColors: MultiColor([
+                      Colors.red,
+                      Colors.orange,
+                    ]),
                   ),
                   TextWrapper.text('Firebase'),
                   TextWrapper.text('Firebase'),

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

@@ -0,0 +1,127 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class CardTheme extends CardThemeExtension {
+  const CardTheme({
+    super.backgroundColors,
+    super.body,
+    super.borderColors,
+    super.secondaryBackgroundColor,
+    super.shadowColor,
+    super.subtitle,
+    super.title,
+  });
+
+  factory CardTheme.light() => CardTheme(
+        backgroundColors: const MultiColor.single(Color(0xFFF6F6F6)),
+        secondaryBackgroundColor: Colors.white,
+        borderColors: const MultiColor([
+          Color(0xFFDDE0E3),
+          Color(0xFFCACCD4),
+        ]),
+        title: GoogleFonts.montserrat(
+          fontSize: 24,
+          fontWeight: FontWeight.w500,
+          color: const Color(0xFF24262A),
+        ),
+        subtitle: GoogleFonts.montserrat(
+          fontSize: 15,
+          fontWeight: FontWeight.w300,
+          color: const Color(0xFF24262A),
+        ),
+        body: GoogleFonts.montserrat(
+          fontSize: 12,
+          fontWeight: FontWeight.w300,
+          height: 1.7,
+          color: const Color(0xFF24262A),
+        ),
+      );
+
+  factory CardTheme.dark() => CardTheme(
+        backgroundColors:
+            MultiColor.single(const Color(0xFFFFFFFF).withOpacity(0.04)),
+        secondaryBackgroundColor: const Color(0xFFFFFFFF).withOpacity(0.04),
+        borderColors: const MultiColor([
+          Color(0xFF60656A),
+          Color(0xFF383C40),
+        ]),
+        title: GoogleFonts.montserrat(
+          fontSize: 24,
+          fontWeight: FontWeight.w500,
+          color: const Color(0xFFFFFFFF),
+        ),
+        subtitle: GoogleFonts.montserrat(
+          fontSize: 15,
+          fontWeight: FontWeight.w300,
+          color: const Color(0xFFFFFFFF),
+        ),
+        body: GoogleFonts.montserrat(
+          fontSize: 12,
+          fontWeight: FontWeight.w300,
+          height: 1.7,
+          color: const Color(0xFFFFFFFF),
+        ),
+      );
+
+  @override
+  ThemeExtension<CardThemeExtension> copyWith({
+    MultiColor? backgroundColors,
+    Color? secondaryBackgroundColor,
+    MultiColor? borderColors,
+    BoxShadow? shadowColor,
+    TextStyle? body,
+    TextStyle? title,
+    TextStyle? subtitle,
+  }) =>
+      CardTheme(
+        backgroundColors: backgroundColors ?? this.backgroundColors,
+        secondaryBackgroundColor:
+            secondaryBackgroundColor ?? this.secondaryBackgroundColor,
+        borderColors: borderColors ?? this.borderColors,
+        shadowColor: shadowColor ?? this.shadowColor,
+        body: body ?? this.body,
+        title: title ?? this.title,
+        subtitle: subtitle ?? this.subtitle,
+      );
+
+  @override
+  ThemeExtension<CardThemeExtension> lerp(
+    covariant ThemeExtension<CardThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! CardTheme) {
+      return this;
+    }
+    return CardTheme(
+      backgroundColors: other.backgroundColors,
+      secondaryBackgroundColor: Color.lerp(
+        secondaryBackgroundColor,
+        other.secondaryBackgroundColor,
+        t,
+      ),
+      borderColors: other.borderColors,
+      shadowColor: BoxShadow.lerp(shadowColor, other.shadowColor, 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/lib/theme/themes.dart

@@ -15,14 +15,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import 'package:adaptive_theme/adaptive_theme.dart';
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide CardTheme;
 import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_kit_example/theme/card_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/file_selection_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/flat_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/loader_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
-import 'package:wyatt_ui_kit_example/theme_extension.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {
@@ -78,32 +78,8 @@ abstract class Themes {
         ),
         scaffoldBackgroundColor: Colors.white,
         extensions: <ThemeExtension<dynamic>>[
-          CustomCardColorExtension(
-            backgroundColors: const [
-              Color(0xFFF6F6F6),
-            ],
-            secondaryBackgroundColors: Colors.white,
-            borderColor: const [
-              Color(0xFFDDE0E3),
-              Color(0xFFCACCD4),
-            ],
-            title: GoogleFonts.montserrat(
-              fontSize: 24,
-              fontWeight: FontWeight.w500,
-              color: const Color(0xFF24262A),
-            ),
-            subtitle: GoogleFonts.montserrat(
-              fontSize: 15,
-              fontWeight: FontWeight.w300,
-              color: const Color(0xFF24262A),
-            ),
-            body: GoogleFonts.montserrat(
-              fontSize: 12,
-              fontWeight: FontWeight.w300,
-              height: 1.7,
-              color: const Color(0xFF24262A),
-            ),
-          ),
+          // Cards
+          CardTheme.light(),
           // Buttons
           FlatButtonTheme.light(),
           SymbolButtonTheme.light(),
@@ -128,33 +104,8 @@ abstract class Themes {
         ),
         scaffoldBackgroundColor: const Color(0xFF383C40),
         extensions: <ThemeExtension<dynamic>>[
-          CustomCardColorExtension(
-            secondaryBackgroundColors:
-                const Color(0xFFFFFFFF).withOpacity(0.04),
-            backgroundColors: [
-              const Color(0xFFFFFFFF).withOpacity(0.04),
-            ],
-            borderColor: const [
-              Color(0xFF60656A),
-              Color(0xFF383C40),
-            ],
-            title: GoogleFonts.montserrat(
-              fontSize: 24,
-              fontWeight: FontWeight.w500,
-              color: const Color(0xFFFFFFFF),
-            ),
-            subtitle: GoogleFonts.montserrat(
-              fontSize: 15,
-              fontWeight: FontWeight.w300,
-              color: const Color(0xFFFFFFFF),
-            ),
-            body: GoogleFonts.montserrat(
-              fontSize: 12,
-              fontWeight: FontWeight.w300,
-              height: 1.7,
-              color: const Color(0xFFFFFFFF),
-            ),
-          ),
+          // Cards
+          CardTheme.dark(),
           // Buttons
           FlatButtonTheme.dark(),
           SymbolButtonTheme.dark(),

packages/wyatt_ui_kit/example/lib/theme_extension.dart

@@ -1,54 +0,0 @@
-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),
-    );
-  }
-}