Admin UI: Setup enmeshed design (#581)

* feat: add themes to the admin ui and add dynamic color package

* feat: add provider

* chore: change variable name to camel case

* ci: trigger pipelines

* chore: remove unnecessary libs

* refactor: rename a file

* chore: remove theme manager

* chore: simplify themes in material app

* refactor: rename main app

* refactor: rename the main app

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

AdminUi/apps/admin_ui/lib/main.dart

@@ -1,3 +1,5 @@
+import 'package:admin_ui/theme/colors/color_schemes.dart';
+import 'package:admin_ui/theme/colors/custom_colors.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
@@ -10,7 +12,9 @@ void main() async {
 
   await setup();
 
-  runApp(const MainApp());
+  runApp(
+    const AdminUiApp(),
+  );
 }
 
 final _rootNavigatorKey = GlobalKey<NavigatorState>();
@@ -63,17 +67,23 @@ final _router = GoRouter(
   ],
 );
 
-class MainApp extends StatelessWidget {
-  const MainApp({super.key});
+class AdminUiApp extends StatelessWidget {
+  const AdminUiApp({super.key});
 
   @override
   Widget build(BuildContext context) {
-    const colorSchemeSeed = Color.fromARGB(255, 23, 66, 141);
     return MaterialApp.router(
+      theme: ThemeData(
+        useMaterial3: true,
+        colorScheme: lightColorScheme,
+        extensions: [lightCustomColors],
+      ),
+      darkTheme: ThemeData(
+        useMaterial3: true,
+        colorScheme: darkColorScheme,
+        extensions: [darkCustomColors],
+      ),
       debugShowCheckedModeBanner: false,
-      themeMode: ThemeMode.light,
-      theme: ThemeData(colorSchemeSeed: colorSchemeSeed, useMaterial3: true),
-      darkTheme: ThemeData(brightness: Brightness.dark, colorSchemeSeed: colorSchemeSeed, useMaterial3: true),
       routerConfig: _router,
     );
   }

AdminUi/apps/admin_ui/lib/theme/colors/color_schemes.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+const lightColorScheme = ColorScheme(
+  brightness: Brightness.light,
+  primary: Color(0xFF365CA8),
+  onPrimary: Color(0xFFFFFFFF),
+  primaryContainer: Color(0xFFD9E2FF),
+  onPrimaryContainer: Color(0xFF001945),
+  secondary: Color(0xFF0060A9),
+  onSecondary: Color(0xFFFFFFFF),
+  secondaryContainer: Color(0xFFD3E4FF),
+  onSecondaryContainer: Color(0xFF001C38),
+  tertiary: Color(0xFF9B4500),
+  onTertiary: Color(0xFFFFFFFF),
+  tertiaryContainer: Color(0xFFFFDBC9),
+  onTertiaryContainer: Color(0xFF331200),
+  error: Color(0xFFBA1A1A),
+  errorContainer: Color(0xFFFFDAD6),
+  onError: Color(0xFFFFFFFF),
+  onErrorContainer: Color(0xFF410002),
+  background: Color(0xFFF8FDFF),
+  onBackground: Color(0xFF001F25),
+  surface: Color(0xFFF8FDFF),
+  onSurface: Color(0xFF001F25),
+  surfaceVariant: Color(0xFFE1E2EC),
+  onSurfaceVariant: Color(0xFF44464F),
+  outline: Color(0xFF757780),
+  onInverseSurface: Color(0xFFD6F6FF),
+  inverseSurface: Color(0xFF00363F),
+  inversePrimary: Color(0xFFB0C6FF),
+  shadow: Color(0xFF000000),
+  surfaceTint: Color(0xFF365CA8),
+  outlineVariant: Color(0xFFC5C6D0),
+  scrim: Color(0xFF000000),
+);
+
+const darkColorScheme = ColorScheme(
+  brightness: Brightness.dark,
+  primary: Color(0xFFB0C6FF),
+  onPrimary: Color(0xFF002D6E),
+  primaryContainer: Color(0xFF18438F),
+  onPrimaryContainer: Color(0xFFD9E2FF),
+  secondary: Color(0xFFA2C9FF),
+  onSecondary: Color(0xFF00315B),
+  secondaryContainer: Color(0xFF004881),
+  onSecondaryContainer: Color(0xFFD3E4FF),
+  tertiary: Color(0xFFFFB68D),
+  onTertiary: Color(0xFF532200),
+  tertiaryContainer: Color(0xFF763300),
+  onTertiaryContainer: Color(0xFFFFDBC9),
+  error: Color(0xFFFFB4AB),
+  errorContainer: Color(0xFF93000A),
+  onError: Color(0xFF690005),
+  onErrorContainer: Color(0xFFFFDAD6),
+  background: Color(0xFF001F25),
+  onBackground: Color(0xFFA6EEFF),
+  surface: Color(0xFF001F25),
+  onSurface: Color(0xFFA6EEFF),
+  surfaceVariant: Color(0xFF44464F),
+  onSurfaceVariant: Color(0xFFC5C6D0),
+  outline: Color(0xFF8F9099),
+  onInverseSurface: Color(0xFF001F25),
+  inverseSurface: Color(0xFFA6EEFF),
+  inversePrimary: Color(0xFF365CA8),
+  shadow: Color(0xFF000000),
+  surfaceTint: Color(0xFFB0C6FF),
+  outlineVariant: Color(0xFF44464F),
+  scrim: Color(0xFF000000),
+);

AdminUi/apps/admin_ui/lib/theme/colors/custom_colors.dart

@@ -0,0 +1,260 @@
+import 'package:flutter/material.dart';
+
+const neutralVariant = Color(0xFF333333);
+const decorative = Color(0xFF61178C);
+const decorative_2 = Color(0xFF8EB0E9);
+const error = Color(0xFF8C1742);
+const warning = Color(0xFF8C6117);
+const success = Color(0xFF428C17);
+
+CustomColors lightCustomColors = const CustomColors(
+  sourceNeutralvariant: Color(0xFF333333),
+  neutralvariant: Color(0xFF006874),
+  onNeutralvariant: Color(0xFFFFFFFF),
+  neutralvariantContainer: Color(0xFF97F0FF),
+  onNeutralvariantContainer: Color(0xFF001F24),
+  sourceDecorative: Color(0xFF61178C),
+  decorative: Color(0xFF833DAE),
+  onDecorative: Color(0xFFFFFFFF),
+  decorativeContainer: Color(0xFFF4D9FF),
+  onDecorativeContainer: Color(0xFF30004B),
+  sourceDecorative2: Color(0xFF8EB0E9),
+  decorative2: Color(0xFF255EA6),
+  onDecorative2: Color(0xFFFFFFFF),
+  decorative2Container: Color(0xFFD5E3FF),
+  onDecorative2Container: Color(0xFF001B3C),
+  sourceError: Color(0xFF8C1742),
+  error: Color(0xFFA93057),
+  onError: Color(0xFFFFFFFF),
+  errorContainer: Color(0xFFFFD9DF),
+  onErrorContainer: Color(0xFF3F0018),
+  sourceWarning: Color(0xFF8C6117),
+  warning: Color(0xFF815600),
+  onWarning: Color(0xFFFFFFFF),
+  warningContainer: Color(0xFFFFDDB1),
+  onWarningContainer: Color(0xFF291800),
+  sourceSuccess: Color(0xFF428C17),
+  success: Color(0xFF2B6C00),
+  onSuccess: Color(0xFFFFFFFF),
+  successContainer: Color(0xFFA6F878),
+  onSuccessContainer: Color(0xFF082100),
+);
+
+CustomColors darkCustomColors = const CustomColors(
+  sourceNeutralvariant: Color(0xFF333333),
+  neutralvariant: Color(0xFF4FD8EB),
+  onNeutralvariant: Color(0xFF00363D),
+  neutralvariantContainer: Color(0xFF004F58),
+  onNeutralvariantContainer: Color(0xFF97F0FF),
+  sourceDecorative: Color(0xFF61178C),
+  decorative: Color(0xFFE5B4FF),
+  onDecorative: Color(0xFF4F0077),
+  decorativeContainer: Color(0xFF692194),
+  onDecorativeContainer: Color(0xFFF4D9FF),
+  sourceDecorative2: Color(0xFF8EB0E9),
+  decorative2: Color(0xFFA8C8FF),
+  onDecorative2: Color(0xFF003061),
+  decorative2Container: Color(0xFF004689),
+  onDecorative2Container: Color(0xFFD5E3FF),
+  sourceError: Color(0xFF8C1742),
+  error: Color(0xFFFFB1C2),
+  onError: Color(0xFF66002B),
+  errorContainer: Color(0xFF891440),
+  onErrorContainer: Color(0xFFFFD9DF),
+  sourceWarning: Color(0xFF8C6117),
+  warning: Color(0xFFFFBA4B),
+  onWarning: Color(0xFF442B00),
+  warningContainer: Color(0xFF624000),
+  onWarningContainer: Color(0xFFFFDDB1),
+  sourceSuccess: Color(0xFF428C17),
+  success: Color(0xFF8BDA5F),
+  onSuccess: Color(0xFF133800),
+  successContainer: Color(0xFF1F5100),
+  onSuccessContainer: Color(0xFFA6F878),
+);
+
+/// Defines a set of custom colors, each comprised of 4 complementary tones.
+///
+/// See also:
+///   * <https://m3.material.io/styles/color/the-color-system/custom-colors>
+@immutable
+class CustomColors extends ThemeExtension<CustomColors> {
+  const CustomColors({
+    required this.sourceNeutralvariant,
+    required this.neutralvariant,
+    required this.onNeutralvariant,
+    required this.neutralvariantContainer,
+    required this.onNeutralvariantContainer,
+    required this.sourceDecorative,
+    required this.decorative,
+    required this.onDecorative,
+    required this.decorativeContainer,
+    required this.onDecorativeContainer,
+    required this.sourceDecorative2,
+    required this.decorative2,
+    required this.onDecorative2,
+    required this.decorative2Container,
+    required this.onDecorative2Container,
+    required this.sourceError,
+    required this.error,
+    required this.onError,
+    required this.errorContainer,
+    required this.onErrorContainer,
+    required this.sourceWarning,
+    required this.warning,
+    required this.onWarning,
+    required this.warningContainer,
+    required this.onWarningContainer,
+    required this.sourceSuccess,
+    required this.success,
+    required this.onSuccess,
+    required this.successContainer,
+    required this.onSuccessContainer,
+  });
+
+  final Color? sourceNeutralvariant;
+  final Color? neutralvariant;
+  final Color? onNeutralvariant;
+  final Color? neutralvariantContainer;
+  final Color? onNeutralvariantContainer;
+  final Color? sourceDecorative;
+  final Color? decorative;
+  final Color? onDecorative;
+  final Color? decorativeContainer;
+  final Color? onDecorativeContainer;
+  final Color? sourceDecorative2;
+  final Color? decorative2;
+  final Color? onDecorative2;
+  final Color? decorative2Container;
+  final Color? onDecorative2Container;
+  final Color? sourceError;
+  final Color? error;
+  final Color? onError;
+  final Color? errorContainer;
+  final Color? onErrorContainer;
+  final Color? sourceWarning;
+  final Color? warning;
+  final Color? onWarning;
+  final Color? warningContainer;
+  final Color? onWarningContainer;
+  final Color? sourceSuccess;
+  final Color? success;
+  final Color? onSuccess;
+  final Color? successContainer;
+  final Color? onSuccessContainer;
+
+  @override
+  CustomColors copyWith({
+    Color? sourceNeutralvariant,
+    Color? neutralvariant,
+    Color? onNeutralvariant,
+    Color? neutralvariantContainer,
+    Color? onNeutralvariantContainer,
+    Color? sourceDecorative,
+    Color? decorative,
+    Color? onDecorative,
+    Color? decorativeContainer,
+    Color? onDecorativeContainer,
+    Color? sourceDecorative2,
+    Color? decorative2,
+    Color? onDecorative2,
+    Color? decorative2Container,
+    Color? onDecorative2Container,
+    Color? sourceError,
+    Color? error,
+    Color? onError,
+    Color? errorContainer,
+    Color? onErrorContainer,
+    Color? sourceWarning,
+    Color? warning,
+    Color? onWarning,
+    Color? warningContainer,
+    Color? onWarningContainer,
+    Color? sourceSuccess,
+    Color? success,
+    Color? onSuccess,
+    Color? successContainer,
+    Color? onSuccessContainer,
+  }) {
+    return CustomColors(
+      sourceNeutralvariant: sourceNeutralvariant ?? this.sourceNeutralvariant,
+      neutralvariant: neutralvariant ?? this.neutralvariant,
+      onNeutralvariant: onNeutralvariant ?? this.onNeutralvariant,
+      neutralvariantContainer: neutralvariantContainer ?? this.neutralvariantContainer,
+      onNeutralvariantContainer: onNeutralvariantContainer ?? this.onNeutralvariantContainer,
+      sourceDecorative: sourceDecorative ?? this.sourceDecorative,
+      decorative: decorative ?? this.decorative,
+      onDecorative: onDecorative ?? this.onDecorative,
+      decorativeContainer: decorativeContainer ?? this.decorativeContainer,
+      onDecorativeContainer: onDecorativeContainer ?? this.onDecorativeContainer,
+      sourceDecorative2: sourceDecorative2 ?? this.sourceDecorative2,
+      decorative2: decorative2 ?? this.decorative2,
+      onDecorative2: onDecorative2 ?? this.onDecorative2,
+      decorative2Container: decorative2Container ?? this.decorative2Container,
+      onDecorative2Container: onDecorative2Container ?? this.onDecorative2Container,
+      sourceError: sourceError ?? this.sourceError,
+      error: error ?? this.error,
+      onError: onError ?? this.onError,
+      errorContainer: errorContainer ?? this.errorContainer,
+      onErrorContainer: onErrorContainer ?? this.onErrorContainer,
+      sourceWarning: sourceWarning ?? this.sourceWarning,
+      warning: warning ?? this.warning,
+      onWarning: onWarning ?? this.onWarning,
+      warningContainer: warningContainer ?? this.warningContainer,
+      onWarningContainer: onWarningContainer ?? this.onWarningContainer,
+      sourceSuccess: sourceSuccess ?? this.sourceSuccess,
+      success: success ?? this.success,
+      onSuccess: onSuccess ?? this.onSuccess,
+      successContainer: successContainer ?? this.successContainer,
+      onSuccessContainer: onSuccessContainer ?? this.onSuccessContainer,
+    );
+  }
+
+  @override
+  CustomColors lerp(ThemeExtension<CustomColors>? other, double t) {
+    if (other is! CustomColors) {
+      return this;
+    }
+    return CustomColors(
+      sourceNeutralvariant: Color.lerp(sourceNeutralvariant, other.sourceNeutralvariant, t),
+      neutralvariant: Color.lerp(neutralvariant, other.neutralvariant, t),
+      onNeutralvariant: Color.lerp(onNeutralvariant, other.onNeutralvariant, t),
+      neutralvariantContainer: Color.lerp(neutralvariantContainer, other.neutralvariantContainer, t),
+      onNeutralvariantContainer: Color.lerp(onNeutralvariantContainer, other.onNeutralvariantContainer, t),
+      sourceDecorative: Color.lerp(sourceDecorative, other.sourceDecorative, t),
+      decorative: Color.lerp(decorative, other.decorative, t),
+      onDecorative: Color.lerp(onDecorative, other.onDecorative, t),
+      decorativeContainer: Color.lerp(decorativeContainer, other.decorativeContainer, t),
+      onDecorativeContainer: Color.lerp(onDecorativeContainer, other.onDecorativeContainer, t),
+      sourceDecorative2: Color.lerp(sourceDecorative2, other.sourceDecorative2, t),
+      decorative2: Color.lerp(decorative2, other.decorative2, t),
+      onDecorative2: Color.lerp(onDecorative2, other.onDecorative2, t),
+      decorative2Container: Color.lerp(decorative2Container, other.decorative2Container, t),
+      onDecorative2Container: Color.lerp(onDecorative2Container, other.onDecorative2Container, t),
+      sourceError: Color.lerp(sourceError, other.sourceError, t),
+      error: Color.lerp(error, other.error, t),
+      onError: Color.lerp(onError, other.onError, t),
+      errorContainer: Color.lerp(errorContainer, other.errorContainer, t),
+      onErrorContainer: Color.lerp(onErrorContainer, other.onErrorContainer, t),
+      sourceWarning: Color.lerp(sourceWarning, other.sourceWarning, t),
+      warning: Color.lerp(warning, other.warning, t),
+      onWarning: Color.lerp(onWarning, other.onWarning, t),
+      warningContainer: Color.lerp(warningContainer, other.warningContainer, t),
+      onWarningContainer: Color.lerp(onWarningContainer, other.onWarningContainer, t),
+      sourceSuccess: Color.lerp(sourceSuccess, other.sourceSuccess, t),
+      success: Color.lerp(success, other.success, t),
+      onSuccess: Color.lerp(onSuccess, other.onSuccess, t),
+      successContainer: Color.lerp(successContainer, other.successContainer, t),
+      onSuccessContainer: Color.lerp(onSuccessContainer, other.onSuccessContainer, t),
+    );
+  }
+
+  /// Returns an instance of [CustomColors] in which the following custom
+  /// colors are harmonized with [dynamic]'s [ColorScheme.primary].
+  ///
+  /// See also:
+  ///   * <https://m3.material.io/styles/color/the-color-system/custom-colors#harmonization>
+  CustomColors harmonized(ColorScheme dynamic) {
+    return copyWith();
+  }
+}