feat: add theme extensions

catalog/gallery/lib/catalog/catalog_app_colors_screen.dart

@@ -11,7 +11,6 @@ class CatalogAppColorsScreen extends StatelessWidget {
   Widget build(BuildContext context) => CatalogScaffold(
         title: 'COLORS',
         child: ListView.separated(
-          shrinkWrap: true,
           separatorBuilder: (BuildContext context, int index) =>
               const Divider(),
           itemCount: _CatalogColors.values.length,
@@ -52,19 +51,19 @@ extension _CatalogScreenExtensions on _CatalogColors {
   Color color(BuildContext context) {
     switch (this) {
       case _CatalogColors.primary:
-        return context.theme.colors.primary;
+        return context.theme.colorScheme.primary;
       case _CatalogColors.secondary:
-        return context.theme.colors.secondary;
+        return context.theme.colorScheme.secondary;
       case _CatalogColors.success:
-        return context.theme.colors.success;
+        return context.theme.customColors.success!;
       case _CatalogColors.info:
-        return context.theme.colors.info;
+        return context.theme.customColors.info!;
       case _CatalogColors.warning:
-        return context.theme.colors.warning;
+        return context.theme.customColors.warning!;
       case _CatalogColors.danger:
-        return context.theme.colors.danger;
+        return context.theme.customColors.danger!;
       case _CatalogColors.text:
-        return context.theme.colors.textColor;
+        return context.theme.customColors.textColor!;
     }
   }
 }

catalog/gallery/lib/catalog/catalog_app_text_fields_screen.dart

@@ -1,5 +1,6 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:catalog/catalog.dart';
+import 'package:catalog/extensions/color_extensions.dart';
 import 'package:catalog/widgets/app_text_fields.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
@@ -21,45 +22,45 @@ class _CatalogTextFieldsScreenState extends State<CatalogTextFieldsScreen> {
 
   @override
   Widget build(BuildContext context) => CatalogScaffold(
-      title: 'TEXT FIELDS',
-      child: Container(
-        margin: const EdgeInsets.all(20),
-        child: Column(
-          children: [
-            AppTextField(
-              controller: labelTextController,
-              labelText: 'Label',
-              helperText: 'Helper text',
-              hintText: 'Text',
-              suffixIcon: Icon(
-                Icons.close,
-                color: context.theme.colors.textColor.shade200,
+        title: 'TEXT FIELDS',
+        child: Container(
+          margin: const EdgeInsets.all(20),
+          child: Column(
+            children: [
+              AppTextField(
+                controller: labelTextController,
+                labelText: 'Label',
+                helperText: 'Helper text',
+                hintText: 'Text',
+                suffixIcon: Icon(
+                  Icons.close,
+                  color: context.theme.customColors.textColor!.getShade(200),
+                ),
+                prefixIcon: Icon(
+                  Icons.close,
+                  color: context.theme.customColors.textColor!.getShade(200),
+                ),
+                keyboardType: TextInputType.emailAddress,
               ),
-              prefixIcon: Icon(
-                Icons.close,
-                color: context.theme.colors.textColor.shade200,
+              SizedBox(height: 10.h),
+              AppTextField(
+                keyboardType: TextInputType.multiline,
+                controller: textAreaTextController,
+                maxLength: 100,
+                labelText: 'Label',
+                hintText: 'Text',
+                currentLength: _characterCount,
+                onChange: (value) {
+                  setState(() {
+                    _characterCount = value.length;
+                  });
+                },
+                minLines: 8,
+                maxLines: 10,
               ),
-              keyboardType: TextInputType.emailAddress,
-            ),
-            SizedBox(height: 10.h),
-            AppTextField(
-              keyboardType: TextInputType.multiline,
-              controller: textAreaTextController,
-              maxLength: 100,
-              labelText: 'Label',
-              hintText: 'Text',
-              currentLength: _characterCount,
-              onChange: (value) {
-                setState(() {
-                  _characterCount = value.length;
-                });
-              },
-              minLines: 8,
-              maxLines: 10,
-            ),
-            SizedBox(height: 10.h),
-          ],
+              SizedBox(height: 10.h),
+            ],
+          ),
         ),
-      ),
-    );
+      );
 }

catalog/gallery/lib/catalog/catalog_app_typography_screen.dart

@@ -23,9 +23,9 @@ class CatalogAppTypographyScreen extends StatelessWidget {
                   child: Center(
                     child: Text(
                       element.name.toUpperCase(),
-                      style: element
-                          .textStyle(context)
-                          .copyWith(color: context.theme.colors.textColor),
+                      style: element.textStyle(context).copyWith(
+                            color: context.theme.customColors.textColor,
+                          ),
                     ),
                   ),
                 ),
@@ -76,17 +76,17 @@ extension _CatalogScreenExtensions on _CatalogTypography {
       case _CatalogTypography.bodySmall:
         return context.theme.textStyles.bodySmall!;
       case _CatalogTypography.bodyXSmall:
-        return context.theme.textStyles.bodyXSmall;
+        return context.theme.customTextStyles.bodyXSmall;
       case _CatalogTypography.buttonXSmall:
-        return context.theme.textStyles.buttonXSmall;
+        return context.theme.customTextStyles.buttonXSmall;
       case _CatalogTypography.buttonLarge:
-        return context.theme.textStyles.buttonLarge;
+        return context.theme.customTextStyles.buttonLarge;
       case _CatalogTypography.buttonMedium:
-        return context.theme.textStyles.buttonMedium;
+        return context.theme.customTextStyles.buttonMedium;
       case _CatalogTypography.buttonSmall:
-        return context.theme.textStyles.buttonSmall;
+        return context.theme.customTextStyles.buttonSmall;
       case _CatalogTypography.buttonXLarge:
-        return context.theme.textStyles.buttonXLarge;
+        return context.theme.customTextStyles.buttonXLarge;
     }
   }
 }

catalog/gallery/lib/catalog/catalog_scaffold_screen.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:catalog/extensions/color_extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:catalog/catalog.dart';
 
@@ -21,13 +22,14 @@ class CatalogScaffold extends StatelessWidget {
               ? IconButton(
                   icon: Icon(
                     Icons.chevron_left,
-                    color: context.theme.colors.primary.shade100,
+                    color: context.theme.colorScheme.primary.getShade(100),
                   ),
                   onPressed: () => context.router.pop(),
                 )
               : null,
           title: Text(title),
         ),
+        backgroundColor: context.theme.customColors.textColor!.getShade(100),
         body: SafeArea(
           child: Padding(
             padding: const EdgeInsets.all(8.0),

catalog/gallery/lib/main/catalog_main_screen.dart

@@ -15,7 +15,7 @@ class CatalogMainScreen extends StatelessWidget {
         child: ListView.separated(
           shrinkWrap: true,
           separatorBuilder: (BuildContext context, int index) => Divider(
-            color: context.theme.colors.primary,
+            color: context.theme.colorScheme.primary,
           ),
           itemCount: _CatalogScreen.values.length,
           itemBuilder: (BuildContext context, int index) {

catalog/lib/catalog.dart

@@ -1,6 +1,6 @@
 library catalog;
 
-export 'theme/app_colors.dart';
+export 'theme/custom_colors.dart';
 export 'theme/app_text_styles.dart';
 export 'theme/app_dimensions.dart';
 export 'theme/app_theme.dart';

catalog/lib/common/helper.dart

@@ -0,0 +1,47 @@
+import 'package:catalog/extensions/color_extensions.dart';
+import 'package:flutter/material.dart';
+
+Color? _getMaterialStatesColor(
+  MaterialState states,
+  Color baseColor, {
+  Color? customDisabledColor,
+  Color? defaultColor,
+  Color? customHoveredColor,
+  Color? customFocusedColor,
+}) =>
+    switch (states) {
+      MaterialState.disabled => customDisabledColor ?? baseColor.getShade(500),
+      MaterialState.focused => customFocusedColor ?? baseColor
+        ..getShade(400),
+      MaterialState.hovered => customHoveredColor ?? baseColor.getShade(300),
+      MaterialState.pressed => baseColor.getShade(400),
+      _ => defaultColor ?? Colors.transparent,
+    };
+
+MaterialStateProperty<Color?> getMaterialStatesColors(
+  Color baseColor, {
+  Color? customDisabledColor,
+  Color? defaultColor,
+  Color? customHoveredColor,
+  Color? customFocusedColor,
+}) =>
+    MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
+      for (final element in states) {
+        return _getMaterialStatesColor(element, baseColor);
+      }
+      return baseColor;
+    });
+
+MaterialStateProperty<BorderSide?> getBorderSidesStates(
+  Color baseColor, {
+  Color? customDisabledColor,
+  Color? defaultColor,
+  Color? customHoveredColor,
+  Color? customFocusedColor,
+}) =>
+    MaterialStateProperty.resolveWith<BorderSide?>((Set<MaterialState> states) {
+      for (final element in states) {
+        return BorderSide(color: _getMaterialStatesColor(element, baseColor)!);
+      }
+      return BorderSide(color: baseColor);
+    });

catalog/lib/extensions/color_extensions.dart

@@ -0,0 +1,61 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+extension ColorExtension on Color {
+  Color getShade(int shade) => this is MaterialColor
+      ? (this as MaterialColor)[shade]!
+      : _generateMaterialColor();
+
+  MaterialColor _generateMaterialColor() => MaterialColor(value, {
+        50: _tintColor(0.9),
+        100: _tintColor(0.8),
+        200: _tintColor(0.6),
+        300: _tintColor(0.4),
+        400: _tintColor(0.2),
+        500: this,
+        600: _shadeColor(0.1),
+        700: _shadeColor(0.2),
+        800: _shadeColor(0.3),
+        900: _shadeColor(0.4),
+      });
+
+  int _tintValue(int value, double factor) =>
+      max(0, min((value + ((255 - value) * factor)).round(), 255));
+
+  Color _tintColor(double factor) => Color.fromRGBO(
+        _tintValue(red, factor),
+        _tintValue(green, factor),
+        _tintValue(blue, factor),
+        1,
+      );
+
+  int _shadeValue(int value, double factor) =>
+      max(0, min(value - (value * factor).round(), 255));
+
+  Color _shadeColor(double factor) => Color.fromRGBO(
+        _shadeValue(red, factor),
+        _shadeValue(green, factor),
+        _shadeValue(blue, factor),
+        1,
+      );
+
+  // Color? get shade100 => _getShade(100);
+  //
+  // Color? get shade200 => _getShade(200);
+  //
+  // Color? get shade300 => _getShade(300);
+  //
+  // Color? get shade400 => _getShade(400);
+  //
+  // Color? get shade500 => _getShade(500);
+  //
+  // Color? get shade600 => _getShade(600);
+  //
+  // Color? get shade700 => _getShade(700);
+  //
+  // Color? get shade800 => _getShade(800);
+  //
+  // Color? get shade900 => _getShade(900);
+  //
+  // Color? get shade1000 => _getShade(1000);
+}