fix(UX-1141): Update tokens to match figma

example/lib/home.dart

@@ -161,30 +161,40 @@ class _HomeState extends State<Home> {
       child: SingleChildScrollView(
         child: Column(
           children: [
-            ExpansionTile(
-              title: Text('Widgets'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _components
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
-            ExpansionTile(
-              title: Text('Theme'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _theme
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
-            ExpansionTile(
-              title: Text('Assets'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _assets
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
+            ExampleListTile(name: 'Components', children: _components),
+            ExampleListTile(name: 'Theme', children: _theme),
+            ExampleListTile(name: 'Assets', children: _assets),
           ],
         ),
       ),
     );
   }
 }
+
+class ExampleListTile extends StatelessWidget {
+  const ExampleListTile({
+    super.key,
+    required this.children,
+    required this.name,
+  });
+
+  final List<Component> children;
+  final String name;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExpansionTile(
+      title: Text(name),
+      children: children
+          .map(
+            (item) => ListTile(
+              title: Text(item.name),
+              onTap: () => context.go('/${item.name}'),
+              hoverColor: Zeta.of(context).colors.surface.hover,
+              tileColor: Zeta.of(context).colors.surface.defaultColor,
+            ),
+          )
+          .toList(),
+    );
+  }
+}

example/lib/main.dart

@@ -1,46 +1,19 @@
 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,
       builder: (context, lightTheme, darkTheme, themeMode) {
         return MaterialApp.router(
           routerConfig: router,

example/lib/pages/assets/icons_example.dart

@@ -25,21 +25,22 @@ class _IconsExampleState extends State<IconsExample> {
         child: Center(
           child: Column(
             children: [
-              Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium).paddingAll(ZetaSpacing.xl_4),
+              Text('Zeta Icons v' + zetaIconsVersion, style: ZetaTextStyles.displayMedium)
+                  .paddingAll(Zeta.of(context).spacing.xl_4),
               Text('Tap icon to copy name to clipboard', style: ZetaTextStyles.titleMedium)
-                  .paddingAll(ZetaSpacing.xl_4),
+                  .paddingAll(Zeta.of(context).spacing.xl_4),
               Wrap(
-                spacing: ZetaSpacing.xl_4,
-                runSpacing: ZetaSpacing.xl_4,
+                spacing: Zeta.of(context).spacing.xl_4,
+                runSpacing: Zeta.of(context).spacing.xl_4,
                 children: icons.entries.map(
                   (e) {
                     final nameArr = (e.key.split('_')).join(' ').capitalize();
                     return Container(
                       width: 120,
                       height: 120,
                       child: InkWell(
-                        borderRadius: ZetaRadius.rounded,
-                        hoverColor: Zeta.of(context).colors.surfaceHover,
+                        borderRadius: Zeta.of(context).radii.rounded,
+                        hoverColor: Zeta.of(context).colors.surface.hover,
                         onTap: () async {
                           await Clipboard.setData(ClipboardData(text: 'ZetaIcons.' + e.key));
                           ScaffoldMessenger.of(context).showMaterialBanner(
@@ -57,7 +58,7 @@ class _IconsExampleState extends State<IconsExample> {
                                 fontFamily: context.rounded ? ZetaIcons.familyRound : ZetaIcons.familySharp,
                                 fontPackage: ZetaIcons.package,
                               ),
-                              size: ZetaSpacing.xl_6,
+                              size: Zeta.of(context).spacing.xl_6,
                             ),
                             Text(
                               nameArr,

example/lib/pages/components/accordion_example.dart

@@ -12,7 +12,7 @@ class AccordionExample extends StatelessWidget {
     return ExampleScaffold(
       name: AccordionExample.name,
       child: SingleChildScrollView(
-        padding: EdgeInsets.all(ZetaSpacing.medium),
+        padding: EdgeInsets.all(Zeta.of(context).spacing.medium),
         child: Column(
           children: [
             Text('Divider'),