chore(UX-144): Integrate color tokens

LICENSE-3RD-PARTY

@@ -152,8 +152,6 @@ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
 
-
-
 ## Mike Rydstrom
 
 Applies to:

README.md

@@ -11,6 +11,7 @@ dart sdk: ">=3.2.0 <4.0.0"
 flutter: ">=3.16.0"
 ```
 
+
 ## Installation
 
 To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install).
@@ -78,7 +79,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 +104,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

custom_docs/components/Color/flutter.md

@@ -77,7 +77,7 @@ ZetaColors has the following modifiers:
 - positive, onPositive, negative, onNegative, warning, onWarning, info, onInfo
 - surface, onSurface, surfaceDisabled, surfaceHover, surfaceSecondary, surfaceTertiary, surfaceSelectedHover, surfaceSelected
 - background, onBackground
-- textDefault, textSubtle, textDisabled, textInverse,
+- mainDefault, mainSubtle, mainDisabled, textInverse,
 - borderDefault, borderSubtle, borderDisabled, borderSelected,
 - white, black
 - link, linkVisited,

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,