style(ui_kit): add example demo-page auto-generation

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

@@ -0,0 +1,63 @@
+// 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 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/theme/constants.dart';
+
+class LoaderTheme extends LoaderThemeExtension {
+  const LoaderTheme({
+    super.colors,
+    super.stroke,
+  });
+
+  factory LoaderTheme.light() => const LoaderTheme(
+        colors: MultiColor([Constants.blue1, Constants.white]),
+        stroke: 15,
+      );
+
+  factory LoaderTheme.dark() => const LoaderTheme(
+        colors: MultiColor([Constants.blue2, Constants.grey2]),
+        stroke: 15,
+      );
+
+  @override
+  ThemeExtension<LoaderThemeExtension> copyWith({
+    MultiColor? colors,
+    double? stroke,
+  }) =>
+      LoaderTheme(
+        colors: colors ?? this.colors,
+        stroke: stroke ?? this.stroke,
+      );
+
+  @override
+  ThemeExtension<LoaderThemeExtension> lerp(
+    covariant ThemeExtension<LoaderThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! LoaderTheme) {
+      return this;
+    }
+    return LoaderTheme(
+      colors: MultiColor.lerp(colors, other.colors, t),
+      stroke: lerpDouble(stroke, other.stroke, t),
+    );
+  }
+}

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

@@ -19,6 +19,7 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.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';
@@ -67,46 +68,49 @@ abstract class Themes {
 
   static ThemeData get studioLight => materialLight.copyWith(
         appBarTheme: AppBarTheme(
-          foregroundColor: const Color.fromRGBO(36, 38, 42, 1),
-          backgroundColor: Colors.white,
+          foregroundColor: const Color(0xFF24262A),
+          backgroundColor: const Color(0xFFFFFFFF),
           titleTextStyle: GoogleFonts.montserrat(
             fontSize: 18,
             fontWeight: FontWeight.w500,
-            color: const Color.fromRGBO(36, 38, 42, 1),
+            color: const Color(0xFF24262A),
           ),
         ),
         scaffoldBackgroundColor: Colors.white,
         extensions: <ThemeExtension<dynamic>>[
           CustomCardColorExtension(
             backgroundColors: const [
-              Color.fromRGBO(246, 246, 246, 1),
+              Color(0xFFF6F6F6),
             ],
             secondaryBackgroundColors: Colors.white,
             borderColor: const [
-              Color.fromRGBO(221, 224, 227, 1),
-              Color.fromRGBO(202, 204, 212, 1),
+              Color(0xFFDDE0E3),
+              Color(0xFFCACCD4),
             ],
             title: GoogleFonts.montserrat(
               fontSize: 24,
               fontWeight: FontWeight.w500,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
             subtitle: GoogleFonts.montserrat(
               fontSize: 15,
               fontWeight: FontWeight.w300,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
             body: GoogleFonts.montserrat(
               fontSize: 12,
               fontWeight: FontWeight.w300,
               height: 1.7,
-              color: const Color.fromRGBO(36, 38, 42, 1),
+              color: const Color(0xFF24262A),
             ),
           ),
+          // Buttons
           FlatButtonTheme.light(),
           SymbolButtonTheme.light(),
           SimpleIconButtonTheme.light(),
           FileSelectionButtonTheme.light(),
+          // Loader
+          LoaderTheme.light(),
         ],
       );
 
@@ -114,46 +118,50 @@ abstract class Themes {
 
   static ThemeData get studioDark => materialDark.copyWith(
         appBarTheme: AppBarTheme(
-          foregroundColor: Colors.white,
-          backgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+          foregroundColor: const Color(0xFFFFFFFF),
+          backgroundColor: const Color(0xFF383C40),
           titleTextStyle: GoogleFonts.montserrat(
             fontSize: 18,
             fontWeight: FontWeight.w500,
-            color: Colors.white,
+            color: const Color(0xFFFFFFFF),
           ),
         ),
-        scaffoldBackgroundColor: const Color.fromRGBO(56, 60, 64, 1),
+        scaffoldBackgroundColor: const Color(0xFF383C40),
         extensions: <ThemeExtension<dynamic>>[
           CustomCardColorExtension(
-            secondaryBackgroundColors: Colors.white.withOpacity(0.04),
+            secondaryBackgroundColors:
+                const Color(0xFFFFFFFF).withOpacity(0.04),
             backgroundColors: [
-              Colors.white.withOpacity(0.04),
+              const Color(0xFFFFFFFF).withOpacity(0.04),
             ],
             borderColor: const [
-              Color.fromRGBO(96, 101, 106, 1),
-              Color.fromRGBO(56, 60, 64, 1),
+              Color(0xFF60656A),
+              Color(0xFF383C40),
             ],
             title: GoogleFonts.montserrat(
               fontSize: 24,
               fontWeight: FontWeight.w500,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
             subtitle: GoogleFonts.montserrat(
               fontSize: 15,
               fontWeight: FontWeight.w300,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
             body: GoogleFonts.montserrat(
               fontSize: 12,
               fontWeight: FontWeight.w300,
               height: 1.7,
-              color: Colors.white,
+              color: const Color(0xFFFFFFFF),
             ),
           ),
+          // Buttons
           FlatButtonTheme.dark(),
           SymbolButtonTheme.dark(),
           SimpleIconButtonTheme.dark(),
           FileSelectionButtonTheme.dark(),
+          // Loader
+          LoaderTheme.dark(),
         ],
       );
 }