Ux 1386

.github/workflows/on-main.yml

@@ -27,7 +27,7 @@ jobs:
         with:
           cache: true
           channel: stable
-          flutter-version: 3.24.x # TODO UX-1347
+          flutter-version: 3.32.x
       - name: Setup flutter
         run: flutter pub get
       - name: Lint and format

.github/workflows/on-release.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           cache: true
           channel: stable
-          flutter-version: 3.24.x # TODO UX-1347
+          flutter-version: 3.32.x
       - name: Install dependencies
         run: flutter pub get
       - name: Format code
@@ -38,7 +38,7 @@ jobs:
         with:
           cache: true
           channel: stable
-          flutter-version: 3.24.x # TODO UX-1347
+          flutter-version: 3.32.x
       - name: Setup flutter
         run: flutter pub get
       - name: Build example app

.github/workflows/pull-request.yml

@@ -20,7 +20,7 @@ jobs:
         with:
           cache: true
           channel: stable
-          flutter-version: 3.24.x # TODO UX-1347
+          flutter-version: 3.32.x
       - uses: ZebraDevs/flutter-code-quality@main
         with:
           token: ${{secrets.GITHUB_TOKEN}}
@@ -54,7 +54,7 @@ jobs:
         with:
           cache: true
           channel: stable
-          flutter-version: 3.24.x # TODO UX-1347
+          flutter-version: 3.32.x
       - name: Setup flutter
         run: flutter pub get
       - name: Build example app

.gitignore

@@ -78,3 +78,4 @@ pubspec.lock
 .master/
 **/.fvm/
 .fvmrc
+**/ios/Flutter/

example/.gitignore

@@ -5,9 +5,11 @@
 *.swp
 .DS_Store
 .atom/
+.build/
 .buildlog/
 .history
 .svn/
+.swiftpm/
 migrate_working_dir/
 
 # IntelliJ related

example/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

example/lib/home.dart

@@ -41,17 +41,15 @@ class _HomePageState extends State<HomePage> {
           return ZdsExpansionTile(
             title: Text(
               rec.key,
-              style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                    color: zeta.colors.textDefault,
-                  ),
+              style: Theme.of(context).textTheme.titleMedium,
             ),
             child: ZdsListGroup(
               items: items.map((route) {
                 return ZdsListTile(
                     title: Text(route.title),
                     trailing: Icon(
                       Icons.keyboard_arrow_right,
-                      color: zeta.colors.iconSubtle,
+                      color: zeta.colors.mainSubtle,
                     ),
                     onTap: () => Navigator.of(context).pushNamed(route.routeName));
               }).toList(),

example/lib/main.dart

@@ -22,19 +22,25 @@ void main() async {
 }
 
 class DemoApp extends StatelessWidget {
-  const DemoApp({Key? key, required this.data, required this.themeService}) : super(key: key);
+  const DemoApp({
+    Key? key,
+    required this.data,
+    this.themeService,
+  }) : super(key: key);
 
-  final ZetaThemeService themeService;
+  final ZetaThemeService? themeService;
   final ZdsThemeData data;
 
   @override
   Widget build(BuildContext context) {
     return ZetaProvider(
-      themeService: themeService,
+      themeService: themeService ?? const ZetaDefaultThemeService(),
       initialThemeMode: data.themeMode,
-      initialThemeData: data.themeData,
+      fontFamily: data.fontFamily,
+      initialTheme: 'zds',
       initialContrast: data.contrast,
-      builder: (context, themeData, themeMode) {
+      customThemes: [data.toCustomTheme()],
+      builder: (context, themeData, darkTheme, themeMode) {
         return MaterialApp(
           title: 'Zds Demo',
           localeResolutionCallback: (Locale? locale, Iterable<Locale> supportedLocales) {
@@ -56,14 +62,8 @@ class DemoApp extends StatelessWidget {
           ],
           routes: kAllRoutes,
           themeMode: themeMode,
-          theme: themeData.colorsLight.toScheme().toTheme(
-                fontFamily: themeData.fontFamily,
-                appBarStyle: data.lightAppBarStyle,
-              ),
-          darkTheme: themeData.colorsDark.toScheme().toTheme(
-                fontFamily: themeData.fontFamily,
-                appBarStyle: data.darkAppBarStyle,
-              ),
+          theme: themeData,
+          darkTheme: darkTheme,
         );
       },
     );

example/lib/pages/components/app_bar.dart

@@ -94,7 +94,7 @@ class _AppBarDemoState extends State<AppBarDemo> with SingleTickerProviderStateM
               title: const Text('Basic color scheme'),
               icon: CircleAvatar(
                 radius: 15,
-                backgroundColor: zetaColors.iconInverse,
+                backgroundColor: zetaColors.mainInverse,
                 child: Text(
                   'DM',
                   style: TextStyle(
@@ -115,7 +115,7 @@ class _AppBarDemoState extends State<AppBarDemo> with SingleTickerProviderStateM
               color: ZdsTabBarColor.surface,
               icon: CircleAvatar(
                 radius: 15,
-                backgroundColor: zetaColors.secondary,
+                backgroundColor: zetaColors.mainSecondary,
                 child: Text(
                   'DM',
                   style: TextStyle(

example/lib/pages/components/bottom_sheet.dart

@@ -245,14 +245,14 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
             ZdsListTile(
               leading: Text('Urgent'),
               trailing: ZdsIndex(
-                color: Zeta.of(context).colors.red,
+                color: Zeta.of(context).colors.mainNegative,
                 child: Text('U'),
               ),
             ),
             ZdsListTile(
               leading: Text('Height'),
               trailing: ZdsIndex(
-                color: Zeta.of(context).colors.orange,
+                color: Zeta.of(context).colors.mainWarning,
                 child: Text('1'),
               ),
             ),
@@ -266,7 +266,7 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
             ZdsListTile(
               leading: Text('Low'),
               trailing: ZdsIndex(
-                color: Zeta.of(context).colors.green,
+                color: Zeta.of(context).colors.mainPositive,
                 child: Text('3'),
               ),
             ),
@@ -308,7 +308,7 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
                   ExcludeSemantics(
                     child: Text(
                       'Date range',
-                      style: themeData.textTheme.titleSmall?.copyWith(color: zetaColors.textSubtle),
+                      style: themeData.textTheme.titleSmall?.copyWith(color: zetaColors.mainSubtle),
                     ).paddingOnly(left: 8),
                   ),
                   const SizedBox(height: 8),
@@ -323,7 +323,7 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
                         child: Text(
                           'Type',
                           style: themeData.textTheme.titleSmall?.copyWith(
-                            color: zetaColors.textSubtle,
+                            color: zetaColors.mainSubtle,
                           ),
                         ).paddingOnly(left: 8),
                       ),
@@ -398,7 +398,7 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
                     child: Text(
                       'Date range',
                       style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                            color: Zeta.of(context).colors.textSubtle,
+                            color: Zeta.of(context).colors.mainSubtle,
                           ),
                     ).paddingOnly(left: 10),
                   ),
@@ -414,7 +414,7 @@ class _BottomSheetDemoState extends State<BottomSheetDemo> with SingleTickerProv
                         child: Text(
                           'Type',
                           style: Theme.of(context).textTheme.titleSmall?.copyWith(
-                                color: Zeta.of(context).colors.textSubtle,
+                                color: Zeta.of(context).colors.mainSubtle,
                               ),
                         ).paddingOnly(left: 10),
                       ),

example/lib/pages/components/button.dart

@@ -189,7 +189,7 @@ class _ButtonDemoState extends State<ButtonDemo> {
                   splashRadius: 20,
                   visualDensity: VisualDensity.compact,
                   onPressed: open,
-                  color: Zeta.of(context).colors.iconSubtle,
+                  color: Zeta.of(context).colors.mainSubtle,
                   icon: const Icon(ZdsIcons.more_vert),
                 ),
                 items: const [
@@ -301,9 +301,9 @@ class _ButtonDemoState extends State<ButtonDemo> {
                   ),
                   const SizedBox(height: 12),
                   ZdsSlidableButton(
-                    buttonColor: Zeta.of(context).colors.iconDefault,
+                    buttonColor: Zeta.of(context).colors.mainDefault,
                     buttonText: 'Clock Out',
-                    buttonSliderColor: Zeta.of(context).colors.warm.surface,
+                    buttonSliderColor: Zeta.of(context).colors.surfaceWarm,
                     buttonIcon: ZdsIcons.clock_stop,
                   ),
                   const SizedBox(height: 36),
@@ -332,10 +332,10 @@ class _ButtonDemoState extends State<ButtonDemo> {
                   Text('Active, basic without animation', style: Theme.of(context).textTheme.headlineMedium),
                   const SizedBox(height: 12),
                   ZdsSlidableButton(
-                    buttonColor: Zeta.of(context).colors.iconDefault,
+                    buttonColor: Zeta.of(context).colors.mainDefault,
                     buttonText: 'Clock Out',
                     buttonIcon: ZdsIcons.clock_stop,
-                    buttonSliderColor: Zeta.of(context).colors.warm.surface,
+                    buttonSliderColor: Zeta.of(context).colors.surfaceWarm,
                     onSlideComplete: () async {
                       debugPrint('Done!');
                       return true;
@@ -348,13 +348,13 @@ class _ButtonDemoState extends State<ButtonDemo> {
                   ),
                   const SizedBox(height: 12),
                   ZdsSlidableButton(
-                    buttonColor: Zeta.of(context).colors.iconDefault,
+                    buttonColor: Zeta.of(context).colors.mainDefault,
                     buttonColorEnd: Theme.of(context).colorScheme.secondary,
                     buttonText: 'Clock Out',
                     buttonTextEnd: DateTime.now().format('KK:mm a'),
                     buttonIcon: ZdsIcons.clock_stop,
                     buttonIconEnd: ZdsIcons.check_circle,
-                    buttonSliderColor: Zeta.of(context).colors.warm.surface,
+                    buttonSliderColor: Zeta.of(context).colors.surfaceWarm,
                     buttonSliderColorEnd: Theme.of(context).primaryColorLight,
                     onSlideComplete: () async {
                       debugPrint('Done!');
@@ -366,19 +366,19 @@ class _ButtonDemoState extends State<ButtonDemo> {
                   Text('Disabled, no message', style: Theme.of(context).textTheme.headlineMedium),
                   const SizedBox(height: 12),
                   ZdsSlidableButton(
-                    buttonColor: Zeta.of(context).colors.iconDefault,
+                    buttonColor: Zeta.of(context).colors.mainDefault,
                     buttonText: 'Clock Out',
                     buttonIcon: ZdsIcons.clock_stop,
-                    buttonSliderColor: Zeta.of(context).colors.warm.surface,
+                    buttonSliderColor: Zeta.of(context).colors.surfaceWarm,
                   ),
                   const SizedBox(height: 36),
                   Text('Disabled with message', style: Theme.of(context).textTheme.headlineMedium),
                   const SizedBox(height: 12),
                   ZdsSlidableButton(
-                    buttonColor: Zeta.of(context).colors.iconDefault,
+                    buttonColor: Zeta.of(context).colors.mainDefault,
                     buttonText: 'Clock Out',
                     buttonIcon: ZdsIcons.clock_stop,
-                    buttonSliderColor: Zeta.of(context).colors.warm.surface,
+                    buttonSliderColor: Zeta.of(context).colors.surfaceWarm,
                     disabledMessage: 'Disabled message that is quite long and goes over two lines',
                   ),
                 ],

example/lib/pages/components/calendar.dart

@@ -103,7 +103,9 @@ class _CalendarDemoState extends State<CalendarDemo> {
               singleMarkerBuilder: (BuildContext context, DateTime date, dynamic _) {
                 return Container(
                   decoration: BoxDecoration(
-                    color: date.isAfter(DateTime.now()) ? Zeta.of(context).colors.red : Zeta.of(context).colors.green,
+                    color: date.isAfter(DateTime.now())
+                        ? Zeta.of(context).colors.mainNegative
+                        : Zeta.of(context).colors.mainPositive,
                     shape: BoxShape.circle,
                   ),
                   width: 5,

example/lib/pages/components/card.dart

@@ -80,7 +80,7 @@ class CardDemo extends StatelessWidget {
                           onPressed: () {},
                           icon: Transform.rotate(
                             angle: math.pi / 2,
-                            child: Icon(ZdsIcons.more_vert, color: Zeta.of(context).colors.iconSubtle),
+                            child: Icon(ZdsIcons.more_vert, color: Zeta.of(context).colors.mainSubtle),
                           ),
                         ),
                         child: const Text('With Header'),

example/lib/pages/components/card_actions.dart

@@ -120,14 +120,14 @@ class CardActionsDemo extends StatelessWidget {
                     Text(
                       '04/19/2021 03:35 PM',
                       style: themeData.textTheme.titleSmall?.copyWith(
-                        color: Zeta.of(context).colors.textSubtle,
+                        color: Zeta.of(context).colors.mainSubtle,
                       ),
                     ),
                     const SizedBox(height: 16),
                     Text(
                       'SR-ROC-Rockford IL.00102',
                       style: themeData.textTheme.titleSmall?.copyWith(
-                        color: Zeta.of(context).colors.textSubtle,
+                        color: Zeta.of(context).colors.mainSubtle,
                       ),
                     ),
                   ],

example/lib/pages/components/expansion_tile.dart

@@ -88,7 +88,7 @@ class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
                   ZdsExpansionTile(
                     title: const Text('Collect feedback from customers who was'),
                     initiallyExpanded: true,
-                    titleColor: const Color(0xff007ABA).withOpacity(0.1),
+                    titleColor: const Color(0xff007ABA).withValues(alpha: 0.1),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [

example/lib/pages/components/icon_text_button.dart

@@ -23,13 +23,13 @@ class IconTextButtonDemo extends StatelessWidget {
                 onTap: () => {onButtonTapped(context)},
                 icon: ZdsIcons.clock_switch,
                 label: 'Shift Trade',
-                backgroundColor: zeta.colors.orange,
+                backgroundColor: zeta.colors.mainWarning,
               ),
               ZdsIconTextButton(
                 onTap: () => {onButtonTapped(context)},
                 icon: ZdsIcons.clock_available,
                 label: 'Availability',
-                backgroundColor: zeta.colors.pink,
+                backgroundColor: zeta.colors.primitives.pink,
               )
             ],
           ),

example/lib/pages/components/index.dart

@@ -15,14 +15,14 @@ class IndexDemo extends StatelessWidget {
             ZdsListTile(
               leading: ZdsIndex(
                 child: Text('2'),
-                color: Zeta.of(context).colors.blue,
+                color: Zeta.of(context).colors.mainPrimary,
               ),
               title: Text('Showcase Extravaganza'),
             ),
             ZdsListTile(
               leading: ZdsIndex(
                 child: Text('2'),
-                color: Zeta.of(context).colors.purple,
+                color: Zeta.of(context).colors.mainInfo,
               ),
               title: Text('Showcase Extravaganza'),
             ),

example/lib/pages/components/information_bar.dart

@@ -10,27 +10,27 @@ class InformationBarDemo extends StatelessWidget {
     return Scaffold(
       body: Column(children: [
         ZdsInformationBar(
-          zetaColorSwatch: zeta.colors.green,
+          zetaColorSwatch: zeta.colors.primitives.green,
           icon: ZdsIcons.check,
           label: 'Approved',
         ),
         SizedBox(height: 10),
         ZdsInformationBar(
-          zetaColorSwatch: zeta.colors.blue,
+          zetaColorSwatch: zeta.colors.primitives.blue,
           icon: ZdsIcons.hourglass,
           label: 'Pending',
         ),
         SizedBox(height: 10),
         ZdsInformationBar(
-          zetaColorSwatch: zeta.colors.red,
+          zetaColorSwatch: zeta.colors.primitives.red,
           icon: ZdsIcons.close,
           label: 'Declined',
         ),
         SizedBox(height: 10),
         ZdsInformationBar(
           icon: Icons.category,
           label: 'Neutral text',
-          zetaColorSwatch: zeta.colors.warm,
+          zetaColorSwatch: zeta.colors.primitives.warm,
         )
       ]),
     );