feat(ui): add colors and rework ComponentThemeData

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

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

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

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

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

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

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

@@ -1,16 +1,16 @@
 // Copyright (C) 2023 WYATT GROUP
 // Please see the AUTHORS file for details.
-// 
+//
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // any later version.
-// 
+//
 // This program is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 // GNU General Public License for more details.
-// 
+//
 // You should have received a copy of the GNU General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 

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

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

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

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