chore(UX-1352): Use dart enhanced enums

README.md

@@ -78,7 +78,6 @@ builder: (context, themeData, themeMode) {
 To tie everything together, use the `ZetaProvider` constructor. The `builder` argument is mandatory, while the others are optional but allow you to set initial values:
 
 ```dart
-
  @override
   Widget build(BuildContext context) {
     return ZetaProvider(
@@ -104,6 +103,67 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
   }
 ```
 
+### Customization
+
+#### Creating custom themes
+
+Custom themes can be made by creating `ZetaCustomTheme` objects. `ZetaCustomTheme` can be constructed by passing in a primary or secondary color and, optionally, their dark variants:
+
+```dart
+ZetaCustomTheme(
+  id: 'custom-theme-red',
+  primary: Colors.red,
+  primaryDark : // Dark variant here,
+  secondary: Colors.blue,
+  secondaryDark: // Dark variant here,
+)
+```
+
+Color arguments can be of type `ZetaColorSwatch`, `MaterialColor`, or `Color`. If only a `Color` is provided, Zeta will generate a `ZetaColorSwatch`. <b>To have control over every shade of a given color, we reccomend providing either a `ZetaColorSwatch` or a `MaterialColor`.</b>
+
+If a dark variant of a color is not provided, Zeta generate one by inverting the corresponding color swatch.
+
+#### Adding custom themes
+
+Once you have defined the custom themes for your app, give them to the ZetaProvider by passing them through the construtor. You can also initialize the custom theme by setting the `initialTheme` argument to the id of the desired theme.
+
+```dart
+  ZetaProvider(
+    initialTheme: 'custom-theme-red'
+    customThemes: [
+      ZetaCustomTheme(
+        id: 'custom-theme-red',
+        primary: Colors.red,
+        secondary: Colors.purple
+      ),
+      ZetaCustomTheme(
+        id: 'custom-theme-purple',
+        primary: Colors.purple,
+        secondary: Colors.green
+      ),
+    ]
+  )
+```
+
+You can also get and set the custom themes via the `ZetaProvider`:
+
+`ZetaProvider.of(context).customThemes`
+`ZetaProvider.of(context).setCustomThemes(newCustomThemes)`
+
+#### Changing the custom theme
+
+To change the custom theme, call the `updateCustomTheme` function on `ZetaProvider` with an id corresponding to a `ZetaCustomTheme` object:
+
+`ZetaProvider.of(context).updateCustomTheme('custom-theme-purple')`
+
+If the id provided does not correspond to a given theme, Zeta will fall back to its default theme.
+
+You can fetch the id of the currently applied custom theme via the `Zeta` object:
+
+`Zeta.of(context).customThemeId`
+
+This will return null if no custom theme is in use.
+
 With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application.
 
 ## Licensing

example/lib/main.dart

@@ -1,46 +1,58 @@
 import 'package:flutter/material.dart';
-import 'package:shared_preferences/shared_preferences.dart';
-import 'package:zeta_example/theme_service.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 import 'home.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
-  final preferences = await SharedPreferences.getInstance();
-  final themeService = SharedPrefsThemeService(preferences);
-  final themePreferences = await themeService.loadTheme();
-
-  runApp(
-    ZetaExample(
-      themeService: themeService,
-      initialZetaThemeData: themePreferences.$1 ?? ZetaThemeData(),
-      initialThemeMode: themePreferences.$2 ?? ThemeMode.system,
-      initialContrast: themePreferences.$3 ?? ZetaContrast.aa,
-    ),
-  );
+  runApp(ZetaExample());
 }
 
 class ZetaExample extends StatelessWidget {
-  const ZetaExample({
-    super.key,
-    required this.themeService,
-    required this.initialContrast,
-    required this.initialThemeMode,
-    required this.initialZetaThemeData,
-  });
-
-  final ZetaThemeService themeService;
-  final ZetaContrast initialContrast;
-  final ThemeMode initialThemeMode;
-  final ZetaThemeData initialZetaThemeData;
+  const ZetaExample({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return ZetaProvider.base(
-      initialZetaThemeData: initialZetaThemeData,
-      initialThemeMode: initialThemeMode,
-      initialContrast: initialContrast,
+    return ZetaProvider(
+      // initialContrast: ZetaContrast.aa,
+      // initialThemeMode: ThemeMode.system,
+      customThemes: [
+        ZetaCustomTheme(
+          id: 'teal',
+          primary: ZetaPrimitivesLight().teal,
+          primaryDark: ZetaPrimitivesDark().teal,
+          secondary: ZetaPrimitivesLight().yellow,
+          secondaryDark: ZetaPrimitivesDark().yellow,
+        ),
+        ZetaCustomTheme(
+          id: 'yellow',
+          primary: ZetaPrimitivesLight().yellow,
+          primaryDark: ZetaPrimitivesDark().yellow,
+          secondary: ZetaPrimitivesLight().red,
+          secondaryDark: ZetaPrimitivesDark().red,
+        ),
+        ZetaCustomTheme(
+          id: 'red',
+          primary: ZetaPrimitivesLight().red,
+          primaryDark: ZetaPrimitivesDark().red,
+          secondary: ZetaPrimitivesLight().purple,
+          secondaryDark: ZetaPrimitivesDark().purple,
+        ),
+        ZetaCustomTheme(
+          id: 'purple',
+          primary: ZetaPrimitivesLight().purple,
+          primaryDark: ZetaPrimitivesDark().purple,
+          secondary: ZetaPrimitivesLight().green,
+          secondaryDark: ZetaPrimitivesDark().green,
+        ),
+        ZetaCustomTheme(
+          id: 'green',
+          primary: ZetaPrimitivesLight().green,
+          primaryDark: ZetaPrimitivesDark().green,
+          secondary: ZetaPrimitivesLight().blue,
+          secondaryDark: ZetaPrimitivesDark().blue,
+        ),
+      ],
       builder: (context, lightTheme, darkTheme, themeMode) {
         return MaterialApp.router(
           routerConfig: router,

example/lib/pages/components/avatar_example.dart

@@ -22,7 +22,7 @@ class AvatarExample extends StatelessWidget {
         ZetaAvatar.initials(
           initials: 'W W',
           size: ZetaAvatarSize.xxs,
-          backgroundColor: Zeta.of(context).colors.green,
+          backgroundColor: Zeta.of(context).colors.borderPositive,
         ),
       ],
       name: AvatarExample.name,
@@ -35,7 +35,7 @@ class AvatarExample extends StatelessWidget {
               ZetaAvatar.initials(
                 initials: 'WW',
                 size: ZetaAvatarSize.xxs,
-                backgroundColor: Zeta.of(context).colors.green,
+                backgroundColor: Zeta.of(context).colors.borderPositive,
               ),
               Column(
                 children: [
@@ -69,7 +69,7 @@ class AvatarExample extends StatelessWidget {
                         children: ZetaAvatarSize.values
                             .map((size) => Column(
                                   children: [
-                                    ZetaAvatar.image(size: size),
+                                    ZetaAvatar.image(size: size, image: image),
                                     const SizedBox(height: 20),
                                   ],
                                 ))
@@ -82,7 +82,8 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      image: image,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                     ),
                                     const SizedBox(height: 20),
                                   ],
@@ -110,7 +111,7 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       image: image,
                                     ),
                                     const SizedBox(height: 20),
@@ -171,7 +172,7 @@ class AvatarExample extends StatelessWidget {
                                     ZetaAvatar.initials(
                                       size: size,
                                       initials: 'AB',
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                     ),
                                     const SizedBox(height: 20),
                                   ],
@@ -230,7 +231,7 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       upperBadge: ZetaAvatarBadge.notification(value: 3),
                                     ),
                                     const SizedBox(height: 20),
@@ -260,7 +261,7 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       upperBadge: ZetaAvatarBadge.notification(value: 3),
                                       image: image,
                                     ),
@@ -323,7 +324,7 @@ class AvatarExample extends StatelessWidget {
                                     ZetaAvatar.initials(
                                       size: size,
                                       initials: 'AB',
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       upperBadge: ZetaAvatarBadge.notification(value: 3),
                                     ),
                                     const SizedBox(height: 20),
@@ -383,7 +384,7 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       lowerBadge: ZetaAvatarBadge.icon(),
                                     ),
                                     const SizedBox(height: 20),
@@ -413,7 +414,7 @@ class AvatarExample extends StatelessWidget {
                                   children: [
                                     ZetaAvatar.image(
                                       size: size,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       lowerBadge: ZetaAvatarBadge.icon(),
                                       image: image,
                                     ),
@@ -476,7 +477,7 @@ class AvatarExample extends StatelessWidget {
                                     ZetaAvatar.initials(
                                       size: size,
                                       initials: 'AB',
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       lowerBadge: ZetaAvatarBadge.icon(),
                                     ),
                                     const SizedBox(height: 20),
@@ -539,7 +540,7 @@ class AvatarExample extends StatelessWidget {
                                     ZetaAvatar.image(
                                       size: size,
                                       image: image,
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       upperBadge: ZetaAvatarBadge.notification(value: 3),
                                       lowerBadge: ZetaAvatarBadge.icon(),
                                     ),
@@ -571,7 +572,7 @@ class AvatarExample extends StatelessWidget {
                                     ZetaAvatar.initials(
                                       size: size,
                                       initials: 'AB',
-                                      borderColor: Zeta.of(context).colors.green,
+                                      borderColor: Zeta.of(context).colors.borderPositive,
                                       upperBadge: ZetaAvatarBadge.notification(value: 3),
                                       lowerBadge: ZetaAvatarBadge.icon(),
                                     ),

example/lib/pages/components/list_item_example.dart

@@ -26,7 +26,7 @@ class _ListItemExampleState extends State<ListItemExample> {
     return ExampleScaffold(
       name: ListItemExample.name,
       child: Container(
-        color: zetaColors.surfaceSecondary,
+        color: zetaColors.surfaceWarm,
         child: SingleChildScrollView(
           child: Padding(
             padding: const EdgeInsets.all(16),

example/lib/pages/components/navigation_rail_example.dart

@@ -63,7 +63,7 @@ class _NavigationRailExampleState extends State<NavigationRailExample> {
                         _titles[_selectedIndex!],
                         textAlign: TextAlign.center,
                         style: ZetaTextStyles.titleMedium.copyWith(
-                          color: zeta.colors.textDefault,
+                          color: zeta.colors.mainDefault,
                           fontWeight: FontWeight.bold,
                         ),
                       ),

example/lib/pages/components/notification_list_example.dart

@@ -32,7 +32,7 @@ class NotificationListItemExample extends StatelessWidget {
                   avatar: ZetaAvatar.initials(
                 initials: "JS",
                 lowerBadge: ZetaAvatarBadge.icon(
-                  color: ZetaColors().surfacePositive,
+                  color: Zeta.of(context).colors.surfacePositive,
                   icon: Icons.check,
                 ),
               )),
@@ -63,7 +63,7 @@ class NotificationListItemExample extends StatelessWidget {
                   avatar: ZetaAvatar.initials(
                 initials: "JS",
                 lowerBadge: ZetaAvatarBadge.icon(
-                  color: ZetaColors().surfacePositive,
+                  color: Zeta.of(context).colors.surfacePositive,
                   icon: Icons.check,
                 ),
               )),
@@ -88,7 +88,7 @@ class NotificationListItemExample extends StatelessWidget {
                   initials: "JS",
                   semanticUpperBadgeLabel: 'Urgent',
                   lowerBadge: ZetaAvatarBadge.icon(
-                    color: ZetaColors().surfacePositive,
+                    color: Zeta.of(context).colors.surfacePositive,
                     icon: Icons.check,
                   ),
                 ),