System theme support

LICENSE-3RD-PARTY

@@ -0,0 +1,9 @@
+-----------------------------------------------------------------------------
+                        MIT
+        applies to: 
+        - tinycolor
+
+                SIL Open Font License, Version 1.1
+        applies to:
+        - IBMPlexSans
+-----------------------------------------------------------------------------

README.md

@@ -2,28 +2,87 @@
 
 Zeta is the new, formal, standardized Zebra Design System based off the successes of ZDS (Zebra Design System).
 
-Note: This package is in pre-release, and so many aspects are incomplete.
+> 🚧 **Note**: This package is in pre-release, and so many aspects are incomplete.
 
-# Usage
+## Installation
 
-[Install zeta_flutter](https://pub.dev/packages/zeta_flutter/install)
+To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install).
 
-Zeta extends the use of Flutter's built in theming tools, and so to work correctly your app needs to be wrapped with the zeta theme as such:
+## Usage
+Zeta offers flexibility in theming through its `ZetaProvider` widget. Here's a breakdown of its features:
+
+### Setting the Initial Theme Mode
+
+Zeta allows you to specify an initial theme mode for your app, which can be one of the following:
+
+- `ThemeMode.system`: Adheres to the system's theme.
+- `ThemeMode.light`: Uses the light theme mode.
+- `ThemeMode.dark`: Uses the dark theme mode.
+
+By default, the theme mode is set to `ThemeMode.system`.
+
+```dart
+initialThemeMode: ThemeMode.light
+```
+
+### Providing Initial Theme Data
+
+You can provide the initial theme data for the app which contains all the theming information. If you don't specify one, it will default to a basic instance of `ZetaThemeData`.
+
+```dart
+initialThemeData: ZetaThemeData()
+```
+
+### Setting the Initial Contrast
+
+Zeta also lets you define the initial contrast setting for your app. By default, it's set to `ZetaContrast.aa`.
+
+```dart
+initialContrast: ZetaContrast.aa
+```
+
+### Building Your App with Zeta Theming
+
+The `builder` function is used to construct the widget tree with the provided theming information. This function is expected to receive a `BuildContext`, `ZetaThemeData`, and `ThemeMode` as arguments, and it should return a `Widget`.
+
+```dart
+builder: (context, themeData, themeMode) {
+  // Your app's widget tree here
+}
+```
+
+### Constructing the ZetaProvider
+
+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 Zeta(
-      builder: (context, theme, colors) {
-        return MaterialApp.router(theme: theme, routerConfig: router);
+    return ZetaProvider(
+      builder: (context, themeData, themeMode) {
+        final dark = themeData.colorsDark.toScheme();
+        final light = themeData.colorsLight.toScheme();
+        return MaterialApp.router(
+          routerConfig: router,
+          themeMode: themeMode,
+          theme: ThemeData(
+            fontFamily: themeData.fontFamily,
+            scaffoldBackgroundColor: light.background,
+            colorScheme: light,
+          ),
+          darkTheme: ThemeData(
+            fontFamily: themeData.fontFamily,
+            scaffoldBackgroundColor: dark.background,
+            colorScheme: dark,
+          ),
+        );
       },
     );
   }
 ```
 
-This returns the Zeta theme and colors, which will be used across the app. Custom `ThemeData` and `ZetaColor` objects can be passed in to apply custom themes and colors.
-
+With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application.
 ## Viewing the components
 
 To view examples of all the components in the library, you can run the example app in this repo or go to [Zeta](https://zeta-ds.web.app/)

custom_docs/components/Color/flutter.md

@@ -21,13 +21,13 @@ class MyApp extends StatelessWidget{
 
     /// Build colors object with custom colors.
     final ZetaColors colors = ZetaColors(
-        /// Add custom colors here.
+      /// Add custom colors here.
     );
 
     /// Wrap whole app with [Zeta] to provide theming.
     return Zeta(
-        colors: colors,
-        builder: (BuildContext context, ThemeData theme, ZetaColors colors) => ZetaColorExample(),
+      colors: colors,
+      builder: (BuildContext context, ThemeData theme, ZetaColors colors) => ZetaColorExample(),
     );
   }
 }
@@ -42,7 +42,7 @@ class ZetaColorExample extends StatelessWidget{
     final ZetaColors colors = ZetaColors.of(context);
 
     return Container(
-        color: colors.red,
+      color: colors.red,
     );
   }
 }

example/android/build.gradle

@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }

example/ios/Podfile.lock

@@ -20,4 +20,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: ef19549a9bc3046e7bb7d2fab4d021637c0c58a3
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.13.0

example/lib/home.dart

@@ -4,20 +4,21 @@ import 'package:zeta_example/pages/color_example.dart';
 import 'package:zeta_example/pages/grid_example.dart';
 import 'package:zeta_example/pages/spacing_example.dart';
 import 'package:zeta_example/pages/typography_example.dart';
+import 'package:zeta_example/widgets.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 class Component {
   final String name;
-  final Widget page;
+  final WidgetBuilder pageBuilder;
   final List<Component> children;
-  Component(this.name, this.page, [this.children = const []]);
+  Component(this.name, this.pageBuilder, [this.children = const []]);
 }
 
 final List<Component> components = [
-  Component(GridExample.name, const GridExample()),
-  Component(SpacingExample.name, const SpacingExample()),
-  Component(TypographyExample.name, const TypographyExample()),
-  Component(ColorExample.name, const ColorExample()),
+  Component(GridExample.name, (context) => const GridExample()),
+  Component(SpacingExample.name, (context) => const SpacingExample()),
+  Component(TypographyExample.name, (context) => const TypographyExample()),
+  Component(ColorExample.name, (context) => const ColorExample()),
 ];
 
 class Home extends StatefulWidget {
@@ -36,8 +37,8 @@ final GoRouter router = GoRouter(
         ...components.map(
           (e) => GoRoute(
             path: e.name,
-            builder: (_, __) => e.page,
-            routes: e.children.map((f) => GoRoute(path: f.name, builder: (_, __) => f.page)).toList(),
+            builder: (_, __) => e.pageBuilder.call(_),
+            routes: e.children.map((f) => GoRoute(path: f.name, builder: (_, __) => f.pageBuilder(_))).toList(),
           ),
         )
       ],
@@ -49,24 +50,17 @@ class _HomeState extends State<Home> {
   @override
   Widget build(BuildContext context) {
     final items = components..sort((a, b) => a.name.compareTo(b.name));
-
-    final colors = ZetaColors.of(context);
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Zeta'),
-        backgroundColor: colors.primary,
-      ),
-      body: ColoredBox(
-        color: colors.background,
-        child: ListView.builder(
-          itemCount: items.length,
-          itemBuilder: (context, index) {
-            return ListTile(
-              title: ZetaText(items[index].name),
-              onTap: () => context.go('/${items[index].name}'),
-            );
-          },
-        ),
+    return ExampleScaffold(
+      name: 'Zeta',
+      child: ListView.builder(
+        padding: EdgeInsets.all(Dimensions.s),
+        itemCount: items.length,
+        itemBuilder: (context, index) {
+          return ListTile(
+            title: ZetaText(items[index].name),
+            onTap: () => context.go('/${items[index].name}'),
+          );
+        },
       ),
     );
   }

example/lib/main.dart

@@ -9,9 +9,24 @@ class ZetaExample extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Zeta(
-      builder: (context, theme, colors) {
-        return MaterialApp.router(theme: theme, routerConfig: router);
+    return ZetaProvider(
+      builder: (context, themeData, themeMode) {
+        final dark = themeData.colorsDark.toScheme();
+        final light = themeData.colorsLight.toScheme();
+        return MaterialApp.router(
+          routerConfig: router,
+          themeMode: themeMode,
+          theme: ThemeData(
+            fontFamily: themeData.fontFamily,
+            scaffoldBackgroundColor: light.background,
+            colorScheme: light,
+          ),
+          darkTheme: ThemeData(
+            fontFamily: themeData.fontFamily,
+            scaffoldBackgroundColor: dark.background,
+            colorScheme: dark,
+          ),
+        );
       },
     );
   }