feat: migrate fonts , themes , colors and text styles to widgetbook

CHANGELOG.md

@@ -1,23 +1,36 @@
+# 1.10.0+12
+
+- [Refactor] : Migrate styles to `pactus-gui-widgetbook` package for consistency and maintainability. [#56](https://github.com/pactus-project/pactus-gui/pull/56)
+  - Removed `InterTextStyles` and replaced with styles from the package.
+  - Eliminated `surface` and `on_surface` palettes, adopting those from the package.
+  - Removed fonts bundled in this project, utilizing package-provided fonts.
+  - Updated all color palette references across the project.
+  - Added `pactus-gui-widgetbook` to project dependencies.
+
+- [Update] : Changed `pactus_gui_widgetbook` package URL to the updated repository location. [#56](https://github.com/pactus-project/pactus-gui/pull/56)
+
+- [Fix] : Resolved theme-switching functionality issues after migration to `pactus-gui-widgetbook`. [#56](https://github.com/pactus-project/pactus-gui/pull/56)
+
 # 1.9.1+11
 
-- [Feature] : CI/CD Integration for Automated Release Builds and Notifications (#50)
-  - feat: add some changes on theme configurations for using fluent_ui package [#45](https://github.com/pactus-project/pactus-gui/pull/45)
+- [Feature] : CI/CD Integration for Automated Release Builds and Notifications [#45](https://github.com/pactus-project/pactus-gui/pull/45)
+  - feat: add some changes on theme configurations for using fluent_ui package 
 
 # 1.9.0+10
 
-- [Feature] : Migrate to `Fluent UI` Framework/DesignSystem
-  - feat: add some changes on theme configurations for using fluent_ui package [#45](https://github.com/pactus-project/pactus-gui/pull/45)
+- [Feature] : Migrate to `Fluent UI` Framework/DesignSystem [#45](https://github.com/pactus-project/pactus-gui/pull/45)
+  - feat: add some changes on theme configurations for using fluent_ui package 
 
 # 1.8.0+9
 
-- [Feature] : Implement or replace the Easy Localization package for efficient localization management
-  - feat(app): add inter text styles to app [#37](https://github.com/pactus-project/pactus-gui/pull/37)
+- [Feature] : Implement or replace the Easy Localization package for efficient localization management [#37](https://github.com/pactus-project/pactus-gui/pull/37)
+  - feat(app): add inter text styles to app 
   - update(app): update font weight in `pubspec.yaml`
 
 # 1.7.0+8
 
-- [Feature] : Implement or replace the Easy Localization package for efficient localization management
-  - feat: add easy localization package to project [#40](https://github.com/pactus-project/pactus-gui/pull/40)
+- [Feature] : Implement or replace the Easy Localization package for efficient localization management [#40](https://github.com/pactus-project/pactus-gui/pull/40)
+  - feat: add easy localization package to project 
   - feat: reformat codes with dart reformat command
   - update: remove `l10n` from project
   - fix: fix translation files for `applications` text in `es` & `fr`
@@ -29,38 +42,38 @@
 
 # 1.6.0+7
 
-- [Feature] : Implement `GoRouter` navigation system
-  - feat: add `easy localization` package to project [#40](https://github.com/pactus-project/pactus-gui/pull/40)
+- [Feature] : Implement `GoRouter` navigation system [#40](https://github.com/pactus-project/pactus-gui/pull/40)
+  - feat: add `easy localization` package to project 
   - feat: reformat codes with dart reformat command
   - update: remove `l10n` from project
 
 # 1.5.0+6
 
-- [Feature] : Implement `GoRouter` navigation system
-  - feat(router): implement GoRouter navigation system  [#32](https://github.com/pactus-project/pactus-gui/pull/32)
+- [Feature] : Implement `GoRouter` navigation system [#32](https://github.com/pactus-project/pactus-gui/pull/32)
+  - feat(router): implement GoRouter navigation system  
   - update(core:router): changing AppRoute get method's
   - fix(core:router): fix basic routes for correctly action of back button
   - fix(router/features): fix register routes for correctly action of back button
 
 # 1.4.0+5
 
-- [Feature] : Implement `ToolbarLogo` and `ThemeSwitcher` 
-  - feat: added `ToolbarLogo` and `ThemeSwitcher` as reusable components with UI implementation, tests, and documentation [#35](https://github.com/pactus-project/pactus-gui/pull/36)
+- [Feature] : Implement `ToolbarLogo` and `ThemeSwitcher` [#35](https://github.com/pactus-project/pactus-gui/pull/36)
+  - feat: added `ToolbarLogo` and `ThemeSwitcher` as reusable components with UI implementation, tests, and documentation 
 
 # 1.3.0+4
 
-- [Feature] : Implement Theme Management
-  - feature(features:main:theme): add theme manager for switch between dark and light themes [#33](https://github.com/pactus-project/pactus-gui/pull/33)
+- [Feature] : Implement Theme Management [#33](https://github.com/pactus-project/pactus-gui/pull/33)
+  - feature(features:main:theme): add theme manager for switch between dark and light themes 
 
 # 1.2.0+3
 
-- [Feature] : Implement Localization Management
-  - feat(localization): integrate l10n_flutter with Bloc for language management [#30](https://github.com/pactus-project/pactus-gui/pull/30)
+- [Feature] : Implement Localization Management [#30](https://github.com/pactus-project/pactus-gui/pull/30)
+  - feat(localization): integrate l10n_flutter with Bloc for language management 
 
 # 1.1.0+2
 
-- [Feature] : Rewriting Project and Upgrading to Flutter 3.24.5
-    - feat: remove old project files and match code with flutter version `3.24.5` [#28](https://github.com/pactus-project/pactus-gui/pull/28)
+- [Feature] : Rewriting Project and Upgrading to Flutter 3.24.5 [#28](https://github.com/pactus-project/pactus-gui/pull/28)
+    - feat: remove old project files and match code with flutter version `3.24.5` 
 
 # 1.0.0+1
 

lib/main.dart

@@ -5,6 +5,7 @@ import 'package:gui/src/core/constants/configurations.dart';
 import 'package:gui/src/core/router/app_router.dart';
 import 'package:gui/src/core/utils/gen/localization/codegen_loader.g.dart';
 import 'package:gui/src/features/main/theme/bloc/theme_bloc.dart';
+import 'package:pactus_gui_widgetbook/app_styles.dart';
 import 'src/features/main/language/presentation/bloc/language_bloc.dart';
 
 void main() async {
@@ -44,7 +45,15 @@ class PactusGuiApp extends StatelessWidget {
                 debugShowCheckedModeBanner: false,
                 routerConfig: routerConfig,
                 title: 'Pactus Gui App',
-                theme: themeState.themeData,
+                theme: FluentThemeData.light().copyWith(
+                  extensions: AppThemeData.lightExtensions,
+                  typography: AppThemeData.typography,
+                ),
+                themeMode: themeState.themeMode,
+                darkTheme: FluentThemeData.dark().copyWith(
+                  extensions: AppThemeData.darkExtensions,
+                  typography: AppThemeData.typography,
+                ),
                 localizationsDelegates: context.localizationDelegates,
                 supportedLocales: AppConfigs.supportedLocales,
                 locale: languageState.selectedLanguage.value,

lib/src/core/common/widgets/theme_switcher.dart

@@ -2,85 +2,115 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:gui/src/core/common/colors/app_colors.dart';
-import 'package:gui/src/core/enums/theme_modes.dart';
 import 'package:gui/src/core/utils/gen/assets/assets.gen.dart';
 import 'package:gui/src/features/main/theme/bloc/theme_bloc.dart';
 
-/// ### [ThemeSwitcher] Documentation
-/// A widget that toggles between light and dark themes using a animated switch.
+/// ### [ThemeSwitcher] Widget documentation
 ///
-/// - Uses `Theme.of(context)` to determine the current theme.
-/// - Displays different icons for light and dark modes with animations.
-/// - Provides a switch that triggers a theme change by `ThemeBloc` when tapped.
+/// A custom widget that toggles between light and dark themes using an
+/// animated switch. It provides a smooth user experience with visually
+/// engaging transitions between the themes.
+///
+/// #### Key Features:
+/// - Utilizes `Theme.of(context)` to check the current theme mode.
+/// - Displays different icons for light and dark themes with animated
+///   opacity.
+/// - Includes an interactive switch with animations for theme toggling.
+/// - Relies on `ThemeBloc` for state management and theme updates.
+///
+/// #### Widget Structure:
+/// 1. **Icons**: Displays a moon icon for the dark theme and a sun icon for
+///    the light theme with opacity animations.
+/// 2. **Switch**: An interactive container that acts as a theme toggle
+///    with animated alignment and styling.
+///
+/// #### Interaction:
+/// - On tapping the switch, a `ThemeChanged` event is dispatched to the
+///   `ThemeBloc` to update the theme mode.
+///
+/// #### Animations:
+/// - Icons fade in and out with an `AnimatedOpacity` widget.
+/// - Switch thumb aligns to the left or right using `AnimatedAlign`.
+/// - Switch background adjusts its appearance with an `AnimatedContainer`.
+///
+/// #### Example:
+/// ```dart
+/// ThemeSwitcher();
 ///
 class ThemeSwitcher extends StatelessWidget {
   const ThemeSwitcher({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final isLightTheme = theme.brightness == Brightness.light;
-    const duration = Duration(milliseconds: 200);
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        AnimatedOpacity(
-          curve: Curves.easeIn,
-          opacity: isLightTheme ? 0.0 : 1.0,
-          duration: duration,
-          child: SvgPicture.asset(
-            Assets.icons.icLightMode,
-          ),
-        ),
-        // Switch
-        GestureDetector(
-          onTap: () {
-            context.read<ThemeBloc>().add(
-                  ThemeChanged(
-                    theme: isLightTheme ? ThemeModes.dark : ThemeModes.light,
-                  ),
-                );
-          },
-          child: AnimatedContainer(
-            margin: EdgeInsets.symmetric(horizontal: 4),
-            width: 40, // Total width of the switch
-            height: 20, // Total height of the switch
-            duration: duration * 2,
-            decoration: BoxDecoration(
-              color: Colors.transparent,
-              borderRadius: BorderRadius.circular(10),
-              border: Border.all(
-                color: AppColors.primaryDark,
+    return BlocBuilder<ThemeBloc, ThemeState>(
+      builder: (context, themeState) {
+        const duration = Duration(milliseconds: 200);
+        final isLightTheme = themeState.themeMode == ThemeMode.light;
+
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            // Dark mode icon
+            AnimatedOpacity(
+              curve: Curves.easeIn,
+              opacity: isLightTheme ? 0.0 : 1.0,
+              duration: duration,
+              child: SvgPicture.asset(
+                Assets.icons.icLightMode,
               ),
             ),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 3),
-              child: AnimatedAlign(
-                duration: Duration(milliseconds: 100),
-                alignment:
-                    isLightTheme ? Alignment.centerRight : Alignment.centerLeft,
-                child: Container(
-                  width: 14, // Thumb width
-                  height: 14, // Thumb height
-                  decoration: BoxDecoration(
+            // Switch
+            GestureDetector(
+              onTap: () {
+                context.read<ThemeBloc>().add(
+                      ThemeChanged(
+                        theme: isLightTheme ? ThemeMode.dark : ThemeMode.light,
+                      ),
+                    );
+              },
+              child: AnimatedContainer(
+                margin: const EdgeInsets.symmetric(horizontal: 4),
+                width: 40,
+                height: 20,
+                duration: duration * 2,
+                decoration: BoxDecoration(
+                  color: Colors.transparent,
+                  borderRadius: BorderRadius.circular(10),
+                  border: Border.all(
                     color: AppColors.primaryDark,
-                    borderRadius: BorderRadius.circular(7),
                   ),
                 ),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 3),
+                  child: AnimatedAlign(
+                    duration: const Duration(milliseconds: 100),
+                    alignment: isLightTheme
+                        ? Alignment.centerRight
+                        : Alignment.centerLeft,
+                    child: Container(
+                      width: 14,
+                      height: 14,
+                      decoration: BoxDecoration(
+                        color: AppColors.primaryDark,
+                        borderRadius: BorderRadius.circular(7),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            // Light mode icon
+            AnimatedOpacity(
+              curve: Curves.easeIn,
+              opacity: isLightTheme ? 1.0 : 0.0,
+              duration: duration,
+              child: SvgPicture.asset(
+                Assets.icons.icDarkMode,
               ),
             ),
-          ),
-        ),
-        // Sun icon (right side)
-        AnimatedOpacity(
-          curve: Curves.easeIn,
-          opacity: isLightTheme ? 1.0 : 0.0,
-          duration: duration,
-          child: SvgPicture.asset(
-            Assets.icons.icDarkMode,
-          ),
-        ),
-      ],
+          ],
+        );
+      },
     );
   }
 }